vue vue-esign签字插件

 2023.06.14
清除画布时背景色被清除,清除事件改为

 // 清空画板
    handleReset() {
      this.$refs.esign.reset();
      const canvas = this.$refs.esign.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    },

 获取canvas的宽高,再画一个背景色

---

 

先看效果

 

一、安装插件vue-esign

npm install vue-esign --save

二、main.js引入

// 引入电子签名
import vueEsign from "vue-esign";
// 使用电子签名
Vue.use(vueEsign);

三、二次封装

生成的base64转文件

// 生成照片
    handleGenerate() {
      var _this = this;
      this.$refs.esign.generate().then((base64) => {
        var blob = _this.dataURLtoBlob(base64)
        var tofile = _this.blobToFile(blob, '签名.jpg')
        console.log(tofile,'tofile')
        setTimeout(async () => {
          const formData = new FormData()
          formData.append('file', tofile, tofile.name)
          formData.append('fileType', 9)
          // ajax 请求
        })
      })
        .catch((err) => {
          this.toast_warn(err); // 画布没有签字时会执行这里 'Not Signned'
        });
    },
    // 将base64转换为blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // 将blob转换为file
    blobToFile(theBlob, fileName) {
      theBlob.lastModifiedDate = new Date()
      theBlob.name = fileName
      return theBlob
    },

四、二次封装使用 

4.1、引入

import Sign from "@/components/sign.vue";
export default {
  components: {
    Sign,
  },
}

4.2、html中

4.3、methods中

    // 点击电子签名的方法
    signHandle() {
      // 展示签名组件
      this.showVueEsign = true;
      this.$nextTick(() => {
        // 触发组件的初始化方法
        this.$refs["dialog-Esign"].init();
      });
    },

    // 回显电子签名图片
    handleImg(base64) {
      //使用$set为dataForm添加esign,并且esign具有自己的getter和setter（响应式）触发Vue更新页面
      this.$set(this.dataForm, "esign", base64);
      // 调用接口更新数据库
      changeRecord(this.dataForm).then(() => {});
    },

附 : 部分字段说明

属性	类型	默认值	说明
width	Number	800	画布宽度，即导出图片的宽度
height	Number	300	画布高度，即导出图片的高度
lineWidth	4	Number	画笔粗细
lineColor	String	#000000	画笔颜色
bgColor	String	空	画布背景色，为空时画布背景透明， 支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'
isCrop	Boolean	false	是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
isClearBgColor	Boolean	true	清空画布时(reset)是否同时清空设置的背景色(bgColor)
format	Number	image/png	生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp
quality	Number	1	生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。