// 清空画板 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(() => {}); },

附 : 部分字段说明