vue电子签名（也可不基于vue开发使用（原生html））（只适用于移动端）

直接上代码（）

<template>
  <div class="signSoard">
    <div class="signatureBox">
      <div class="canvasBox" ref="canvasHW">
        <canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd'></canvas>
        <div class="btnBox">
          <div @click="overwrite">重写</div>
        </div>
        <!-- <div class="zw"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'signSoard',
  data() {
    return {
      stageInfo:'',
      imgUrl:'',
      points: [],
      canvasTxt: null,
      startX: 0,
      startY: 0,
      moveY: 0,
      moveX: 0,
      endY: 0,
      endX: 0,
      isDown: false,
      isViewAutograph: this.$route.query.isViews > 0,
      contractSuccess: this.$route.query.contractSuccess
    }
  },
  mounted() {
    let canvas = this.$refs.canvasF
    // canvas.height = this.$refs.canvasHW.offsetHeight
    canvas.width =  400
    console.log(this.$refs.canvasHW.offsetHeight)
    this.canvasTxt = canvas.getContext('2d')
  },
  methods: {
    //定义起始点
    touchStart(ev) {
      this.stageInfo = this.$refs.canvasF.getBoundingClientRect()
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stageInfo.left,
          y: ev.targetTouches[0].clientY - this.stageInfo.top,
        }
        this.canvasTxt.lineWidth = 2.2;//线宽
        this.startX = obj.x
        this.startY = obj.y
        this.points.push(obj)
      }
    },
    //移动中
    touchMove(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stageInfo.left,
          y: ev.targetTouches[0].clientY - this.stageInfo.top,
        }
        this.moveY = obj.y
        this.moveX = obj.x
        this.canvasTxt.beginPath()
        this.canvasTxt.lineWidth = 2.2;
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.startY = obj.y
        this.startX = obj.x
        this.points.push(obj)
      }
      this.imgUrl=this.$refs.canvasF.toDataURL();
    },
    //移动结束
    async touchEnd(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stageInfo.left,
          y: ev.targetTouches[0].clientY - this.stageInfo.top,
        }
        this.canvasTxt.beginPath()
        this.canvasTxt.lineWidth = 2.2;
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.points.push(obj)
      }
      this.senfOut(this.$refs.canvasF.toDataURL())
    },
    //导出生成的图片
    async senfOut(base64,width,height){
   	// 通过子传父吧base64 发给父组件
      this.$emit('base64img',(await this.resizedataURL(base64,300,120)).split(',')[1])
    },
    //修改图片大小
    resizedataURL(datas, wantedWidth, wantedHeight){
      return new Promise(async function(resolve,reject){
        let img = document.createElement('img');
        img.onload = function(){
          let canvas = document.createElement('canvas');
          let ctx = canvas.getContext('2d');
          canvas.width = wantedWidth;
          canvas.height = wantedHeight;
          ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);
          let dataURI = canvas.toDataURL();
          resolve(dataURI);
        };
        img.src = datas;
      })
    },
    //重写
    overwrite() {
      this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
      this.points = []
      this.imgUrl=''
      this.$emit('base64img','')
    },
  }
}
</script>
<style lang="scss" scoped>
.signSoard{
  min-height: 29vh;
  .signatureBox {
    width: 100%;
    height: calc(100% - 50px);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 100;
    border: 1px solid #ddd;
    background: #eee;
    flex-direction: column;
  }
  .canvasBox {
    // height: calc(65vh - .5rem);
    box-sizing: border-box;
    cancas{
      // height: 300px;
      width: 100%;
    }
  }
  .imgCanvas{
    background: #fff;
  }
  .btnBox {
    padding: 10px;
    text-align: center;
  }
  // .btnBox button:first-of-type {
  //   background: transparent;
  //   border-radius: 4px;
  //   height: 40px;
  //   width: 80px;
  //   font-size: 14px;
  // }
  // .btnBox button:last-of-type {
  //   background: #71b900;
  //   color: #fff;
  //   border-radius: 4px;
  //   height: 40px;
  //   width: 80px;
  //   font-size: 14px;
  // }
  // .zw{
  //   height: 1.5rem;
  //   background: #ccc;
  // }
}
</style>

也有插件 ：官网