vue中引用电子签名

Posted 2022-12-01 不靠谱的作曲家

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