uni-app canvas 手写签名板功能实现(vue)

仅仅为了记录下踩过的坑 如果能帮到你 请留言点赞 哈哈
话不多说上代码

<template>
  <view>
    <view class="signature">
      <view id="canvas">
		 
	  </view>
    </view>
    <u-button id="clear" @click="clear">重新签名</u-button>
    <u-button id="save" @click="saveSign">确定保存</u-button>
	<view class="img">
		<image :src="src" style="width: 740rpx;height: 600rpx;"></image>
	</view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
		src: '',
		time1: '',
		time2: ''
    };
  },
  onReady() {
    this.init_lineCanvas();
  },
  methods: {
    // 保存签名
    saveSign() {
      this.time1 = setTimeout(() => {
        this.src = sessionStorage.getItem("imgBase64");
		 console.log(this.src)
        /* 电子签名base64图片上传*/
        //接口上传
      }, 500);
    },
    init_lineCanvas() {
      document.addEventListener(
        "touchmove",
        function(event) {
          event.preventDefault();
        },
        { passive: false }
      );
      new this.lineCanvas({
        el: document.getElementById("canvas"), // 绘制canvas的父级div
        clearEl: document.getElementById("clear"), // 清除按钮
        saveEl: document.getElementById("save"), // 保存按钮
        linewidth: 3, // 线条粗细，选填
        color: "black", // 线条颜色，选填
        background: "#ffffff" ,// 线条背景，选填,
		url: this.src
      });
    },
    /* 电子签名手写板 */
    lineCanvas(obj) {
      this.linewidth = 1;
      this.color = "#000000";
      this.background = "#ffffff";
      for (var i in obj) {
        this[i] = obj[i];
      }
      this.canvas = document.createElement("canvas");
      this.el.appendChild(this.canvas);
      this.cxt = this.canvas.getContext("2d");
	  // this.ctx = uni.createCanvasContext('canvas')
      this.canvas.width = 370;
      this.canvas.height = 307;
      this.cxt.fillStyle = this.background;
      this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
      this.cxt.strokeStyle = this.color;
      this.cxt.lineWidth = this.linewidth;
      this.cxt.lineCap = "round";
      this.time2 = setTimeout(()=>{
		  // 开始绘制
		  this.canvas.addEventListener(
		    "touchstart",
		    function(e) {
		      console.log('开始绘制')
		      this.cxt.beginPath();
		      this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
		    }.bind(this),
		    false
		  );
		  // 绘制中
		  this.canvas.addEventListener(
		    "touchmove",
		    function(e) {
		      this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
		      this.cxt.stroke();
		    }.bind(this),
		    false
		  );
		  // 结束绘制
		  this.canvas.addEventListener(
		    "touchend",
		    function() {
		      console.log('结束绘制')
		      this.cxt.closePath();
		    }.bind(this),
		    false
		  );
	  } ,200)
	  
	  // 清除画布
	   document.getElementById("clear").addEventListener(
	    "click",
	    function() {
	      console.log('清除画布')
	      this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
	    }.bind(this),
	    false
	  );
	  document.getElementById("clear").click();
	  // 保存图片，直接转base64
	  document.getElementById("save").addEventListener(
	    "click",
	    ()=> {
	      var imgBase64 = this.canvas.toDataURL();
	      console.log("保存签名成功" + imgBase64);
	      sessionStorage.setItem("imgBase64", imgBase64);
		  // console.log(this)
	    },
	    false
	  );
    },
	clear() {
		this.src = ''
		clearTimeout(this.time1,this.time2)
	},
  }
};
</script>
 
<style>
.signature {
  width: 100%;
  height: 600rpx;
  background: #fff;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  position: relative;
  padding-top: 20rpx;
}
 
#canvas canvas {
  display: block;
  background: #f3f3f3;
  border-radius: 16rpx;
  margin: 0 auto;
}
 
.img {
	width: 740rpx;
	height: 600rpx;	
}
</style>

至于为什么加了一些延时器 相信大牛能懂 因为addEventListener 为null获取不到dom元素