技術標籤：canvashtml5vue.js

vue中使用canvas畫布簽名 使用外掛–＞Signature Pad

安裝外掛

npm install --save signature_pad

引入

import SignaturePad from 'signature_pad';

建立canvas

<div>
   <canvas class="canvasId"/>
   <button @click="save">儲存</button>
   <button @click="
 
clear">清除</button>
</div>

JS程式碼

data () {
    return {
      SignaturePad:null,
      config:{
        penColor: "#000000",   //筆刷顏色
        minWidth:3,       //最小寬度
      }
    }
},
methods: {
  getCanvas() {
     var canvas = document.querySelector('.canvasId');
     //console.log(canvas)
 

     this.signaturePad = new SignaturePad(canvas, this.config);
     canvas.height = 240;
     canvas.width = 400;
  },
  //儲存
  save(){
    //預設儲存為png格式
    console.log(this.signaturePad.toDataURL())
    console.log(this.signaturePad.toDataURL('image/jpeg'))
    console.log(this.signaturePad.toDataURL('image/svg+xml'
 
))
    console.log(this.signaturePad.isEmpty())  //判斷畫布有沒有內容,布林型
  },
  //清除
  clear() {
     //清除畫布內容
     this.signaturePad.clear();
  },
}

mounted呼叫getCanvas()

mounted() {
   this.getCanvas()
},

按鈕的位置和樣式可以自己去設定