vue 移动端签字_vue使用canvas实现移动端手写签名

基于vue使用canvas实现移动端手写签名！

之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。

HTML部分：

请输入您的签名7：

Canvas画板

重写

保存签名

为了节约时间，样式写的比较简单。凑合看吧！

script部分

var draw;

var preHandler = function(e){e.preventDefault();}

class Draw {

constructor(el) {

this.el = el

this.canvas = document.getElementById(this.el)

this.cxt = this.canvas.getContext('2d')

this.stage_info = canvas.getBoundingClientRect()

this.path = {

beginX: 0,

beginY: 0,

endX: 0,

endY: 0

}

}

init(btn) {