目录
一、具体思路
二、所需依赖
三、添加签名面板
3.1 canvas 转base64
3.2 电子签名等比例缩小
四、html转cavas（原始文档）
五、合成图片
六、效果测试
七、完整源码
一、具体思路
在vue项目中使用以下步骤思路去实现：
起初的原始文档的格式都转成图片格式来处理；
电子签名的模板转成base64
前端将文档的样式和电子签名的模板合成一张图片，进行预览
通过原始图片文档与电子签名的图片进行合并，期间需要调整签名base64的位置和缩放比例，然后添加合并到原始文档，最终形成签名后的文档。
二、所需依赖
npm i signature_pad@4.2.0
npm i html2canvas
signature_pad 签名板
signature_pad - npm
html2canvas html转cavas
html2canvas - npm
三、添加签名面板
*签名版*
import SignaturePad from 'signature_pad'
mounted() {
const canvas = document.getElementById('signCanvas')
this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' }) //penColor 笔的颜色
},
发现我鼠标所在的位置跟落笔产生了偏移 需要调用一下这个 adjustSignatureImgPos这个方法
//校正签名位置偏移
adjustSignatureImgPos() {
const canvas = document.getElementById('signCanvas')
const ratio = Math.max(window.devicePixelRatio || 1, 1) // 清除画布
canvas.width = canvas.offsetWidth * ratio
canvas.height = canvas.offsetHeight * ratio
canvas.getContext('2d').scale(ratio, ratio)
},
mounted() {
const canvas = document.getElementById('signCanvas')
this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' }) //penColor 笔的颜色
this.adjustSignatureImgPos()
},
3.1 canvas 转base64
this.signatureimgSrc =this.signatureExample.toDataURL('image/png') //得到了就是base64的
打印输入如下：
3.2 电子签名等比例缩小
把生成的电子签名等比例缩小
传入我们电子签名的base64，然后生成一个新元素image ，改变它的大小，然后在通过canvas转成base64，在return 出来
我们需要使用Promise去异步处理他，并拿到返回的新base64
// 绘制的canvas 进行缩放并转为base64
resizeImage(src) {
return new Promise((resolve) => {
const img = new Image()
img.src = src
img.onload = () => {
const originalWidth = img.width
const originalHeight = img.height
const scaleFactor = 0.5 // 缩放的倍数
const resizedWidth = originalWidth * scaleFactor
const resizedHeight = originalHeight * scaleFactor
const canvas = document.createElement('canvas')
canvas.width = resizedWidth
canvas.height = resizedHeight
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, resizedWidth, resizedHeight)
const base64 = canvas.toDataURL('image/png')
resolve(base64)
}
})
},
效果如下：
四、html转cavas（原始文档）
我们需要把html编写的文档转成base64
这个我们用html2canvas 这个插件：
import html2canvas from 'html2canvas'
html2canvas(document.querySelector("#capture")).then(canvas => {
this.htmlimgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
});
五、合成图片
接下来我们需要将html文档和电子签名模板，合成一张图片
写一个合并图片的方法：
传入两个参数，分别是原始图片文档和电子签名图片文档；
//合并图片
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');
},
调用合并图片方法：
//点击提交 进行合并图片 保存签名面板内容
submit(){
this.mergeimg(this.imgUrl,this.signatureimgSrcScale)
},
六、效果测试
七、完整源码
原文档
-----------------------
*签名版*
签名
签名后的文档
-----------------------
到此这篇关于Vue实现电子签名功能的完整代码的文章就介绍到这了,更多相关Vue电子签名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
vue3.0实现移动端电子签名组件
Vue Canvas实现电子签名
vue 使用 canvas 实现手写电子签名
使用vue实现一个电子签名组件的示例代码