vue实现电子署名、图片合成、及预览功能

业务功能：电子署名、图片合成、及预览功能
业务背景：需求说想要实现一个电子署名，然后需要提供一个预览的功能，可以查察签完名之后的完整结果。
需求探讨：后端大佬跟我说，文档我返回给你一个PDF的oss链接，然后你直接展示，你前端签完名之后给我一个base64的字符串就可以了，我回复ojbk（草率的一批）。
等我转过身，调研一下技能实现发现不对，我大前端需要做一个预览的功能啊，它需要将多张图片合成一张图片，你给我一个oss链接，我怎么转base64。带着这个想法，我跟我们的后端大佬探讨了一下，
最终确定方案是如许：
1.文档的样式由Css+Html去画
2.电子署名的模板转成base64给后端保持稳定
3.前端将文档的样式和电子署名的模板合成一张图片，进行预览
根据以上，作为一名码农，我翻阅了，github，npm 找到了符合本次功能的插件。
插件：

1. signature_pad 签名板  链接： https://www.npmjs.com/package/signature_pad
2. merge-images  合并图像  链接：  https://www.npmjs.com/package/merge-images
3. html2canvas   html转cavas   链接：https://www.npmjs.com/package/html2canvas

复制代码

先放结果图：

文档的css+html的样式，我就不献丑了哈，各人按本身的理解来。
电子署名的画板

• html中创建一个id为signCanvas的canvas元素
  

1. <section>
2.     <div class="sign-box">
3.       <p><span style="color: #f00;">*</span>{{ $t('本人签名') }}</p>
4.       <el-button type="default" @click="clear(1)">{{ $t('清空') }}</el-button>
5.     </div>
6.     <canvas id="signCanvas" style="width:100%;height:300px;" />
7. </section>

复制代码

• 初始化 SignaturePad
  

1. mounted(){
2.    const canvas = document.getElementById('signCanvas')
3.    this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色   
4. }

复制代码

然后我就尝试了一下，发现我鼠标地点的位置跟落笔产生了偏移

然后翻阅文档发现，是需要调用一下这个 resizeCanvas 这个方法

1. mounted(){
2.    const canvas = document.getElementById('signCanvas')
3.    this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色   
4.    this.resizeCanvas()
5. }
7. resizeCanvas() {
8.   const canvas = document.getElementById('signCanvas')
9.   const ratio = Math.max(window.devicePixelRatio || 1, 1) // 清除画布
10.   canvas.width = canvas.offsetWidth * ratio
11.   canvas.height = canvas.offsetHeight * ratio
12.   canvas.getContext('2d').scale(ratio, ratio)
13.   this.signatureExample.clear()
14. },

复制代码

调用了一下，果然有效。
再加一个清除的方法，官方有提供，直接调用即可

1. this.signatureExample.clear()

复制代码

canvas 转base64

1. this.signatureExample.toDataURL('image/png')    //得到了就是base64的   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......

复制代码

html转cavas

• 我们需要把html编写的文档转成base64
  

这个我们用html2canvas 这个插件就可以了

1. const element = document.querySelector('.html_body') // 需要导出的页面    哪个元素需要转成cavas  就获取它
2. const htmlCanvas = await html2canvas(element, {
3. allowTaint: true,
4. useCORS: true
5. })
6. this.imgSrc = htmlCanvas.toDataURL('image/png')    //得到base64

复制代码

合成图片

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

1. import mergeImages from 'merge-images'
2. /* x 、y 是图片在合成图片上的位置（可自行调整）  */
3. const mergeImagesList = [
4.     { src: this.imgSrc, x: 0, y: 0 },   //html 转成的base64
5.     { src: this.signatureExample.toDataURL('image/png'), x: 370, y: 440 }    //  电子签名的 base64   
6. ]
7. mergeImages(mergeImagesList).then(b64 => {
8.     this.previewSrc = b64     //返回base64   可直接用于展示
9. })

复制代码

这个时候我们看预览的结果发现，电子署名的字好大啊，这是跟我们canvas元素的巨细是有关系的，如果我们改变了这个元素的巨细，用户署名的时候就会体验感很差，这肯定不符合我们的预期，以是我们要把天生的电子署名等比例缩小。

通过这个方法我们可以传入我们电子署名的base64，然后天生一个新元素image ，改变它的巨细，然后在通过canvas转成base64，在return 出来
PS：我们需要使用Promise去异步处理他，并拿到返回的新base64.

1. // 绘制的canvas 进行缩放并转为base64
2.     resizeImage(src) {
3.       return new Promise((resolve) => {
4.         const img = new Image()
5.         img.src = src
6.         img.onload = () => {
7.           const originalWidth = img.width
8.           const originalHeight = img.height
9.           const scaleFactor = 0.3 // 缩放的倍数
10.           const resizedWidth = originalWidth * scaleFactor
11.           const resizedHeight = originalHeight * scaleFactor
12.           const canvas = document.createElement('canvas')
13.           canvas.width = resizedWidth
14.           canvas.height = resizedHeight
15.           const ctx = canvas.getContext('2d')
16.           ctx.drawImage(img, 0, 0, resizedWidth, resizedHeight)
17.           const base64 = canvas.toDataURL('image/png')
18.           resolve(base64)
19.         }
20.       })
21.     },

复制代码

然后我们重新改下合成图片的方法

1.   import mergeImages from 'merge-images'
2. const imgStr = await this.resizeImage(this.signatureExample.toDataURL('image/png'))
3. const mergeImagesList = [
4.     { src: this.imgSrc, x: 0, y: 0 },   //html 转成的base64
5.     { src: imgStr, x: 370, y: 440 }    //  电子签名的 base64   
6. ]
7. mergeImages(mergeImagesList).then(b64 => {
8.     this.previewSrc = b64     //返回base64   可直接用于展示
9. })

复制代码

ok，没题目了

尚有一点需要注意的是，后端是不需要data:image/png;base64，以是还我们需要对这个字符串做个处理

1. // 获取到image的base64 可以把这个传到后台解析成图片
2. // imgStr = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......
3. // 去掉data:image/png;base64,我们只要后面的部分iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......
4. const subStr = (str) => {
5.     return str.substring(22, str.length)
6. }
7. subStr(this.signatureExample.toDataURL('image/png'))   //返回的就可以直接传给后端啦

复制代码

总结

本文先容了电子署名、图片合成、及预览功能，大要的整块逻辑及代码已提供，细节方面需要各人，自行调试哈。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。