基于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部分

  <style scoped lang="less">
    .hello{
        height: 100%;
        width: 100%;
        background: #ccc;
            h1, h2 { font-weight: normal; } 
            ul { list-style-type: none; padding: 0; } 
            li { display: inline-block; margin: 0 10px; } 
            a { color: #42b983; } 
            #canvas { background: pink; cursor: default; } 
            #keyword-box { margin: 10px 0; } 
            button{font-size: 0.2rem;color: blue;}
    }

效果图：

就到这里吧！
由于第一次用csdn发博客，时间问题还没来得及研究格式问题，可能有点不体面。下次改进！！！！
以后会给大家分享各种有趣的demo 一起分享，一起进步

canvas实现移动端手写签名！