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);

三、二次封装

<template>
  <section>
    <div class="sign-wrap">
      <div class="box">
        <vue-esign ref="esign" :width="600" :height="400" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
      </div>
      <div class="dialog-footer">
        <div class="btn" @click="handleReset">清空画板</div>
        <div class="btn confirm-btn" @click="handleGenerate">生成图片</div>
      </div>
    </div>
  </section>
</template>

<script>
import { XButton } from "vux";
export default {
  components: { XButton },
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "#ccc",
      resultImg: "", //base64结果数据
      isCrop: false,//是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
    };
  },
  mounted() {
  },
  methods: {
    // 初始化方法
    init() {
      this.$nextTick(() => {
        this.$refs.esign.reset();
      });
    },
    // 清空画板
    handleReset() {
      this.$refs.esign.reset();
    },
    // 生成照片
    handleGenerate() {
      // 生成图片
      // 可选配置参数 ，在未设置format或quality属性时可在生成图片时配置 例如： {format:'image/jpeg', quality: 0.5}
      // this.$refs.esign.generate({format:'image/jpeg', quality: 0.5})
      this.$refs.esign.generate().then((base64) => {
        this.resultImg = base64; //默认生成的是base64形式的图片
        // 将生成的base64格式的图片传给父组件
        this.$emit("handleImg", base64);
        //   如果需要下载
        //   const a = document.createElement("a");
        //   a.href = res;
        //   a.download = "签名.png";
        //   a.click();
        //   a.remove();
      })
        .catch((err) => {
          this.toast_warn(err); // 画布没有签字时会执行这里 'Not Signned'
        });
    },
  },
};
</script>

<style lang="less">
.sign-wrap {
  .box {
    margin: 0 auto;
    background: #ecf0fa;
    border-radius: 3px;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }
  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    .btn {
      font-size: 14px;
      color: #666;
      width: 45%;
      text-align: center;
      box-sizing: border-box;
      background-color: #f8f8f8;
      padding: 3px 0;
      border-radius: 4px;
    }
    .confirm-btn {
      background-color: #0076bd;
      color: #fff;
    }
  }
}
</style>

生成的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中

    <!-- 电子签名组件 -->
    <sign v-if="showVueEsign" @handleImg="handleImg" ref="dialog-Esign" />

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。其他参数会被忽略。