vue中使用canvas画布签名 使用插件Signature Pad

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()
},

按钮的位置和样式可以自己去设置