在vue中设计一个客户签名的功能

<template>
  <div class="hello">
    <p>签字：</p>
    <canvas id="canvas" width="300" height="400">Canvas画板</canvas>
    <button style="background: #fff;color:#F7B932" @click="clear">清除</button>
    <button style="background: #F7B932;color:#fff" @click="save">保存</button>
    <p style="width:100%;height: .2rem"></p>
  </div>
</template>
<script>
  let draw;
  let 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) {
      let 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) {
      let 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(){
        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, 400, 600)
    }
    save(){
      return canvas.toDataURL("image/png")
    }
  }
  export default {
    data () {
      return {
        msg: ‘Welcome to Your Vue.js App‘,
        val:true
      }
    },
    mounted() {
      draw = new Draw(‘canvas‘);
      draw.init();

      //获取屏幕的宽度
      let  clientWidth = document.documentElement.clientWidth;
      let  clientHeight = document.documentElement.clientHeight;
      //根据设计图中的canvas画布的占比进行设置
      let canvasWidth = Math.floor(clientWidth*200/220);
      let canvasHeight = Math.floor(clientHeight*200/320);
      canvas.setAttribute(‘width‘,canvasWidth+‘px‘);
      canvas.setAttribute(‘height‘,canvasHeight+‘px‘);
    },
    methods:{
      clear:function(){
        draw.clear();
      },
      save:function(){
        let data=draw.save();
        const _this = this
        _this.postRequestN9(‘’, {
          pkInspection: this.$route.params.pkInspection,
          pkInspectionRecord:this.$route.params.pkInspectionRecord,
          clientSignStr:data,
          accountCode:this.$route.params.accountCode
        }, function (data) {
          alert(‘保存成功‘)
          _this.$router.push({name: ‘‘})
        })
      },
      // 将base64转换成file对象
      // dataURLtoFile (dataurl, filename = ‘qianming‘) {
      //   let arr = dataurl.split(‘,‘)
      //   let mime = arr[0].match(/:(.*?);/)[1]
      //   let suffix = mime.split(‘/‘)[1]
      //   let bstr = atob(arr[1])
      //   let n = bstr.length
      //   let u8arr = new Uint8Array(n)
      //   while (n--) {
      //     u8arr[n] = bstr.charCodeAt(n)
      //   }
      //   return new File([u8arr], `${filename}.${suffix}`, {type: mime})
      // },
      mutate(word) {
        this.$emit("input", word);
      },
    }
  }
</script>

<style scoped>
  .hello{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .hello p{
    text-align: left;
    padding:.8rem 0 .5rem .4rem;
    box-sizing: border-box;
    font-size: .5rem
  }
  .hello button{
    outline:none;
    width:4rem;
    height:1.2rem;
    border:1px solid #F7B932;
    border-radius:1rem;
    margin-top: .5rem;
    font-size: .45rem;
  }
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  #canvas {
    background: #F6F6F6;
    touch-action: none;
    cursor: default;

  }
  #keyword-box {
    margin: 10px 0;
  }
</style>