使用VUE通过canvas制作签字版

1、创建画布

<canvas
      id="canvas"
      width="800"
      height="600"
      @mousedown="canvasDown($event)"
      @mousemove="canvasMove($event)"
      @mouseup="canvasUp($event)"
      @mouseleave="canvasLeave($event)"
      ref="canvas"
    >抱歉，您的浏览器不支持canvas元素</canvas> //canvas 标签内部的元素指的是当你的浏览器不支持canvas是所展示的内容

2、在 mounted 中展示

内容还是放在methods中，由mounted展示

mounted() {
  this.show();
}
methods:{
  show(){
      this.canvas = this.$refs.canvas;//指定canvas
      this.ctx = this.canvas.getContext("2d");//设置2D渲染区域
      this.ctx.lineWidth = 5;//设置线的宽度
  }
}

3、根据canvas中所提供的鼠标事件做相应的事

这里有一处很多人在写的签字版的时候都会遇到的问题，当签字版的功能大致完成之后你会发现，如果当你点下鼠标的时候，并不是在canvas区域内部触发的mouseup事件，而是将鼠标移出canvas区域外在松开的时候，之后必须要在点击下canvan事件来触发up事件，否则会出现不点击鼠标也会签字的情况，这是就用到mouseleave，在mouseleave中做mouseup相同的事，就可以避免类似的事情发生

    canvasDown(e) {
      this.canvasMoveUse = true;
      const canvasX = e.clientX - e.target.offsetLeft;
      const canvasY = e.clientY - e.target.offsetTop + document.documentElement.scrollTop;
      this.ctx.beginPath():  // 移动的起点
      this.ctx.moveTo(canvasX, canvasY);
      
    },
    canvasMove(e) {
      if (this.canvasMoveUse) {
        // 只有允许移动时调用
        const t = e.target;
        let canvasX;
        let canvasY;
        canvasX = e.clientX - t.offsetLeft;
        canvasY = e.clientY - t.offsetTop + document.documentElement.scrollTop;
        this.ctx.lineTo(canvasX, canvasY);
        this.ctx.stroke();
      }
    },
    canvasUp(e) {
      this.canvasMoveUse = false;
    },
    canvasLeave(e) {
      this.canvasMoveUse = false; 
    },

4、额外按钮

当然，你也可以做一些额外且常见的功能，比如重画，清空，提交等。
下面我们来实现清空功能，只需要设置一个按钮，搭配上相应的时间即可

<button @click="clear">
        清空
 </button>

clear(){
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
    },

提交的时候，通过toDataURL('image/jpg') 可以将canvas转化为base64数据

      var base64Img = this.canvas.toDataURL('image/jpg');
      console.log(base64Img);

5、另外各位小伙伴在做提交的时候，要注意设置判断不能提交空页面，以及图片格式问题。有问题欢迎在屏幕下方的留言板对我进行评价留言，喜欢的点个关注，点关注，不迷路哦亲亲。

qinqin.gif