vue中引用电子签名

Posted 2021-06-19 不靠谱的作曲家

1.下载电子签名插件

cnpm install signature_pad

2.配置画笔属性

data(){
	return{
		SignaturePad:null,
		config: {
		  backgroundColor: "rgba(255,255,255,0)",
		  penColor: "#000", //笔刷颜色
		  minWidth: 1, //最小宽度
		  maxWidth: 8,
		},
	}
}

3.html结构

<div class="signature-content" ref="getOffset">
  <div class="examinerNameBg">{{ examinerName }}</div>
  <canvas class="canvasId" />
</div>

4.初始画布

init() {
      let canvas = document.querySelector(".canvasId");
      var ctx = canvas.getContext("2d");
      this.signaturePad = new SignaturePad(canvas, this.config);
      var ratio = window.devicePixelRatio;
      this.$nextTick(() => {
        var canvasWidth = this.$refs.getOffset.offsetWidth;
        var canvasHeight = this.$refs.getOffset.offsetHeight;
        canvas.style.width = canvasWidth + "px";
        canvas.style.height = canvasHeight + "px";
        canvas.width = canvasWidth * ratio;
        canvas.height = canvasHeight * ratio;
        ctx.scale(ratio, ratio);
      });
    },

5.获取签名内容

if (this.signaturePad.isEmpty() == true) {  //画布为空
  return false;
}
var image = this.signaturePad.toDataURL("image/svg+xml"); //签名内容

6.清除画布内容

this.signaturePad.clear();

电子签名官方 npm