vueはcanvasを使って携帯端末に手書きで署名することを実現します。

vueに基づいてcanvasを使ってモバイル端末の手書きサインを実現します。
これまで自分で開発したもので、手書きで署名し、写真として保存する必要がありました。自分はネットでいっぱい探しましたが、完璧ではないです。それからネット上のを参考にして自分の最適化と修正を加えて一版を作りました。必要な友達があったら直接に使ってください。
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>
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;}
 }

効果図:

ここまでにしましょう
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。