vueに基づいてcanvasを使用してモバイル側の手書き署名を実現します!

vueに基づいてcanvasを使用してモバイル側の手書き署名を実現します!
以前は、手書き署名を実現し、画像を生成するbase 64データストリームを画像として保存する必要があった.自分はネットでたくさん探したが、完璧ではなかった.それからネット上の自分の最適化と修正を参考にして1版を作りました.必要な友达が持ってきて直接使うことを望んでいます.問題があるか、より良い最適化意見があれば、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部分