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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值