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

1. 安装插件

   npm install --save signature_pad
   
   yarn add signature_pad

    

2. 引入

   import SignaturePad from 'signature_pad';

    

3. 创建canvas

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

    

4. mounted调用

   init() {
      let canvas = document.querySelector('.canvasId');
      this.signaturePad = new SignaturePad(canvas,this.config);
      canvas.height = 300;
      canvas.width = 500;
   },

   data中 

   data () {
       return {
         SignaturePad:null,
         config:{
           penColor: "red",   //笔刷颜色
           minWidth:3,       //最小宽度
         }
       }
     },

    

5. 保存

   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())  //判断画布有没有内容
   },

    

 

 6.清除

clear(){
   //清除画布内容
   this.signaturePad.clear();
},

7.更多详情请查看文档