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

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

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

HTML部分：

<template>
  <div class="hello" >
    <div>请输入您的签名7：div>
        <canvas id="canvas" ref="canvasW" width="373" height="200" style="border:1px solid black" >Canvas画板canvas>
    <img v-bind:src="url" alt="">
    <div>
        <button type="" v-on:click="clear">重写button>
        <button v-on:click="save">保存签名button>
    div>
  div>
 
template>

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

<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) {
     
        var that = this; 
        //初始化生成
        this.canvas.addEventListener('touchstart', function(event) {
     
            document.addEventListener('touchstart', preHandler, false); 
            that.drawBegin(event)
        })
        this.canvas.addEventListener('touchend', function(event) {
      
            document.addEventListener('touchend', preHandler, false); 
            that.drawEnd()
            
        })
        this.clear(btn)
    }
    drawBegin(e) {
     
        var that = this;
        window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
        this.cxt.strokeStyle = "#000"
        this.cxt.beginPath()
        this.cxt.moveTo(
            e.changedTouches[0].clientX - this.stage_info.left,
            e.changedTouches[0].clientY - this.stage_info.top
        )
        this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
        this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
        canvas.addEventListener("touchmove",function(ev){
     
            ev.preventDefault()
            that.drawing(event)
        })
    }
    drawing(e) {
     
        this.cxt.lineTo(
            e.changedTouches[0].clientX - this.stage_info.left,
            e.changedTouches[0].clientY - this.stage_info.top
        )
        this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
        this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
        this.cxt.stroke()
    }
    drawEnd() {
     
        document.removeEventListener('touchstart', preHandler, false); 
        document.removeEventListener('touchend', preHandler, false);
        document.removeEventListener('touchmove', preHandler, false);
    }
    clear(btn) {
     
        this.cxt.clearRect(0, 0, this.stage_info.width, this.stage_info.height)
        // this.cxt.clearRect(0, 0, 373, 200)
    }
    save(){
     
       return canvas.toDataURL("image/png")
       console.log(canvas.toDataURL("image/png"))
    }
}

export default {
     
  data () {
     
    return {
     
      msg: '啦啦啦',
      val:true,
      url:""
    }
  },
  mounted() {
     
      draw=new Draw('canvas');
      draw.init();
  },
  methods:{
     
    clear:function(){
     
        draw.clear();
        // 用于点击清除画布时，同时清除上次保存的图片
        this.save()
    },
    save:function(){
     
        var data=draw.save();
        this.url = data;
        // 生成图片的base64数据流 
    },
　　mutate(word){
     
        this.$emit("input", word);
    },
  }
}
 </script> 

css部分