一、具体思路

在vue项目中使用以下步骤思路去实现：

1. 起初的原始文档的格式都转成图片格式来处理；

2. 电子签名的模板转成base64

3. 前端将文档的样式和电子签名的模板合成一张图片，进行预览

通过原始图片文档与电子签名的图片进行合并，期间需要调整签名base64的位置和缩放比例，然后添加合并到原始文档，最终形成签名后的文档。

二、所需依赖

npm i signature_pad@4.2.0npm i html2canvas

signature_pad 签名板 https://www.npmjs.com/package/signature_pad
html2canvas html转cavas https://www.npmjs.com/package/html2canvas

三、添加签名面板

javascript">        <div class="sign-box" style="width:300px;height:200px;padding: 10px; margin:10px;background-color: rgb(221 216 216);"><p><span style="color: #f00;">*</span>签名版<span style="color: #f00;">*</span></p><div><canvas id="signCanvas"/></div><button type="default" @click="clear()">清除</button><button type="default" @click="review()">游览</button><button aria-placeholder="添加签名到文件" type="default" @click="submit()">提交</button></div>

javascript">import SignaturePad from 'signature_pad'

javascript">    mounted() {const canvas = document.getElementById('signCanvas')this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色},

发现我鼠标所在的位置跟落笔产生了偏移 需要调用一下这个 adjustSignatureImgPos这个方法

javascript">        //校正签名位置偏移adjustSignatureImgPos() {const canvas = document.getElementById('signCanvas')const ratio = Math.max(window.devicePixelRatio || 1, 1) // 清除画布canvas.width = canvas.offsetWidth * ratiocanvas.height = canvas.offsetHeight * ratiocanvas.getContext('2d').scale(ratio, ratio)},

javascript">    mounted() {const canvas = document.getElementById('signCanvas')this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色this.adjustSignatureImgPos()},

2.1 canvas 转base64

javascript">this.signatureimgSrc =this.signatureExample.toDataURL('image/png')   //得到了就是base64的   

打印输入如下：

2.2 电子签名等比例缩小

把生成的电子签名等比例缩小

传入我们电子签名的base64，然后生成一个新元素image ，改变它的大小，然后在通过canvas转成base64，在return 出来

我们需要使用Promise去异步处理他，并拿到返回的新base64

javascript">        // 绘制的canvas 进行缩放并转为base64resizeImage(src) {return new Promise((resolve) => {const img = new Image()img.src = srcimg.onload = () => {const originalWidth = img.widthconst originalHeight = img.heightconst scaleFactor = 0.5 // 缩放的倍数const resizedWidth = originalWidth * scaleFactorconst resizedHeight = originalHeight * scaleFactorconst canvas = document.createElement('canvas')canvas.width = resizedWidthcanvas.height = resizedHeightconst ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, resizedWidth, resizedHeight)const base64 = canvas.toDataURL('image/png')resolve(base64)}})},

效果如下：

四、html转cavas（原始文档）

我们需要把html编写的文档转成base64
这个我们用html2canvas 这个插件：

javascript">import html2canvas from 'html2canvas'

javascript">html2canvas(document.querySelector("#capture")).then(canvas => {this.htmlimgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
});

五、合成图片

接下来我们需要将html文档和电子签名模板，合成一张图片

写一个合并图片的方法：

传入两个参数，分别是原始图片文档和电子签名图片文档；

javascript">        //合并图片mergeimg(imgUrl,signatureimgSrc){// 创建一个 canvas 元素const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 创建两个图像对象const img1 = new Image();const img2 = new Image();// 设置图像的 src 属性为 Base64 编码的字符串img1.src = imgUrl;img2.src = signatureimgSrc;// 设置 canvas 的宽度和高度// 这里假设我们将图像水平排列，因此宽度是两幅图宽度之和，高度取最大值canvas.width = img1.width + img2.width;canvas.height = Math.max(img1.height, img2.height);// 绘制第一张图像ctx.drawImage(img1, 0, 0);// 绘制第二张图像，放置在第一张图像的右边ctx.drawImage(img2, 300, 500);// 将合并后的图像导出为 Base64 编码的字符串this.mergedImage = canvas.toDataURL('image/png');},

调用合并图片方法：

javascript">   //点击提交 进行合并图片 保存签名面板内容submit(){this.mergeimg(this.imgUrl,this.signatureimgSrcScale)},

六、效果测试

七、完整源码

javascript"><template><div class="page"><div><h3>原文档</h3><h3>-----------------------</h3><img :src="imgUrl"></div><div class="sign-box" style="width:300px;height:200px;padding: 10px; margin:10px;background-color: rgb(221 216 216);"><p><span style="color: #f00;">*</span>签名版<span style="color: #f00;">*</span></p><div><canvas id="signCanvas"/></div><button type="default" @click="clear()">清除</button><button type="default" @click="review()">游览</button><button aria-placeholder="添加签名到文件" type="default" @click="submit()">提交</button></div><div><h3>签名</h3><img :src="signatureimgSrcScale"></div> <div><h3>签名后的文档</h3><h3>-----------------------</h3><img :src="mergedImage"></div></div>
</template><script>
import SignaturePad from 'signature_pad'
import html2canvas from 'html2canvas'
import pdf from 'vue-pdf'export default {components: {pdf},data() {return {imgUrl: '../../static/file.png',signatureimgSrc: null,htmlimgUrl: null,signatureExample: null,mergedImage: null,signatureimgSrcScale: null}},mounted() {const canvas = document.getElementById('signCanvas')this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色this.adjustSignatureImgPos()},created() {},methods: {//校正签名位置偏移adjustSignatureImgPos() {const canvas = document.getElementById('signCanvas')const ratio = Math.max(window.devicePixelRatio || 1, 1) // 清除画布canvas.width = canvas.offsetWidth * ratiocanvas.height = canvas.offsetHeight * ratiocanvas.getContext('2d').scale(ratio, ratio)},//html页面内容转为base64html2base64(){html2canvas(document.querySelector("#capture")).then(canvas => {this.htmlimgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流});},//合并图片mergeimg(imgUrl,signatureimgSrc){// 创建一个 canvas 元素const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 创建两个图像对象const img1 = new Image();const img2 = new Image();// 设置图像的 src 属性为 Base64 编码的字符串img1.src = imgUrl;img2.src = signatureimgSrc;// 等待两张图像都加载完毕// await Promise.all([this.loadImage(img1), this.loadImage(img2)]);// 设置 canvas 的宽度和高度// 这里假设我们将图像水平排列，因此宽度是两幅图宽度之和，高度取最大值canvas.width = img1.width + img2.width;canvas.height = Math.max(img1.height, img2.height);// 绘制第一张图像ctx.drawImage(img1, 0, 0);// 绘制第二张图像，放置在第一张图像的右边ctx.drawImage(img2, 300, 500);// 将合并后的图像导出为 Base64 编码的字符串this.mergedImage = canvas.toDataURL('image/png');},loadImage(img) {return new Promise((resolve, reject) => {img.onload = resolve;img.onerror = reject;});},//点击清除按钮 清除签名面板内容        clear(){//清除签名面板的方法this.signatureExample.clear()},async review(){this.signatureimgSrc =this.signatureExample.toDataURL('image/png')this.signatureimgSrcScale =await this.resizeImage(this.signatureExample.toDataURL('image/png'))console.log("======== this.signatureimgSrc==========", this.signatureimgSrc)},//点击提交 进行合并图片 保存签名面板内容submit(){this.mergeimg(this.imgUrl,this.signatureimgSrcScale)},// 绘制的canvas 进行缩放并转为base64resizeImage(src) {return new Promise((resolve) => {const img = new Image()img.src = srcimg.onload = () => {const originalWidth = img.widthconst originalHeight = img.heightconst scaleFactor = 0.5 // 缩放的倍数const resizedWidth = originalWidth * scaleFactorconst resizedHeight = originalHeight * scaleFactorconst canvas = document.createElement('canvas')canvas.width = resizedWidthcanvas.height = resizedHeightconst ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, resizedWidth, resizedHeight)const base64 = canvas.toDataURL('image/png')resolve(base64)}})},}
}
</script>
<style>
.page{display: flex;flex-direction: row;margin: 10px;text-align: center;background: #fff;padding: 10px;
}
</style>

上述代码只是平常练习使用，如需使用在正式项目中，请自行修改完善！！！

---

人生从来没有真正的绝境。只要一个人的心中还怀着一粒信念的种子，那么总有一天，他就能走出困境，让生命重新开花结果。

---