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

业务功能:电子签名、图片合成、及预览功能

业务背景:需求说想要实现一个电子签名,然后需要提供一个预览的功能,可以查看签完名之后的完整效果。

需求探讨:后端大佬跟我说,文档我返回给你一个PDF的oss链接,然后你直接展示,你前端签完名之后给我一个base64的字符串就可以了,我回复ojbk(草率的一批)。

等我转过身,调研一下技术实现发现不对,我大前端需要做一个预览的功能啊,它需要将多张图片合成一张图片,你给我一个oss链接,我怎么转base64。带着这个想法,我跟我们的后端大佬探讨了一下,

最终确定方案是这样:

1.文档的样式由Css+Html去画

2.电子签名的模板转成base64给后端保持不变

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

根据以上,作为一名码农,我翻阅了,github,npm 找到了符合本次功能的插件。

插件:

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

先放效果图:

文档的css+html的样式,我就不献丑了哈,大家按自己的理解来。

电子签名的画板

  • html中创建一个id为signCanvas的canvas元素
<section><div class="sign-box"><p><span style="color: #f00;">*</span>{{ $t('本人签名') }}</p><el-button type="default" @click="clear(1)">{{ $t('清空') }}</el-button></div><canvas id="signCanvas" style="width:100%;height:300px;" />
</section>
  • 初始化 SignaturePad
mounted(){const canvas = document.getElementById('signCanvas')this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色   
}

然后我就尝试了一下,发现我鼠标所在的位置跟落笔产生了偏移

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

mounted(){const canvas = document.getElementById('signCanvas')this.signatureExample = new SignaturePad(canvas, { penColor: 'rgb(0, 0, 0)' })  //penColor   笔的颜色   this.resizeCanvas()
}resizeCanvas() {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)this.signatureExample.clear()
},

调用了一下,果然有用。

再加一个清除的方法,官方有提供,直接调用即可

this.signatureExample.clear()

canvas 转base64

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

html转cavas

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

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

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

合成图片

  • 接下来我们需要将html文档和电子签名模板,合成一张图片
import mergeImages from 'merge-images'
/* x 、y 是图片在合成图片上的位置(可自行调整)  */
const mergeImagesList = [{ src: this.imgSrc, x: 0, y: 0 },   //html 转成的base64{ src: this.signatureExample.toDataURL('image/png'), x: 370, y: 440 }    //  电子签名的 base64   
]
mergeImages(mergeImagesList).then(b64 => {this.previewSrc = b64     //返回base64   可直接用于展示
})

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

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

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

// 绘制的canvas 进行缩放并转为base64resizeImage(src) {return new Promise((resolve) => {const img = new Image()img.src = srcimg.onload = () => {const originalWidth = img.widthconst originalHeight = img.heightconst scaleFactor = 0.3 // 缩放的倍数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)}})},

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

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

ok,没问题了

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

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

总结

本文介绍了电子签名、图片合成、及预览功能,大体的整块逻辑及代码已提供,细节方面需要大家,自行调试哈。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7.27扣...

知识点补充&#xff1a; 1.StringBuilder StringBuilder 类在 Java 中是一个可变字符序列。与 String 类不同&#xff0c;StringBuilder 可以在创建之后被修改。这意味着你可以向 StringBuilder 对象追加、插入或删除字符&#xff0c;而不需要创建新的对象&#xff08;辅助数…

企业公户验证API如何使用JAVA、Python、PHP语言进行应用

在纷繁复杂的金融与商业领域&#xff0c;确保每笔交易的安全与合规是至关重要的。而企业公户验证API&#xff0c;正是这样一位默默守护的数字卫士&#xff0c;它通过智能化的手段&#xff0c;简化了企业对公账户验证流程&#xff0c;让繁琐的审核变得快捷且可靠。 什么是企业公…

chrome浏览器驱动(所有版本)

chrome浏览器驱动 114之前版本 https://chromedriver.storage.googleapis.com/index.html 125以后 125以后版本下载链接在此&#xff0c;只有后面status是绿色对勾的才可以下载&#xff0c;驱动大版本一致就可以使用&#xff0c;不需版本号一模一样&#xff1b;下载所需版本只…

语言转文字

因为工作原因需要将语音转化为文字&#xff0c;经常搜索终于找到一个免费的好用工具&#xff0c;记录下使用方法 安装Whisper 搜索Colaboratory 右上方链接服务 执行 !pip install githttps://github.com/openai/whisper.git !sudo apt update && sudo apt install f…

在appium中,如何通过匹配图片来进行断言?

在Appium中进行图片匹配断言&#xff0c;可以使用OpenCV来实现。以下是使用Appium和OpenCV进行图片匹配断言的示例代码。 首先&#xff0c;需要确保安装了必要的库&#xff1a; pip install opencv-python-headless pip install opencv-python pip install numpy然后&#xf…

【区块链+绿色低碳】绿色电力分布式身份管理系统 | FISCO BCOS应用案例

目前&#xff0c;绿色电力场景在身份管理方面存在一些痛点&#xff0c;如&#xff1a;绿色电力交易场景中&#xff0c;主体地理位置分散&#xff0c;主体类型&#xff08;人、机、 物&#xff09;差异较大&#xff0c;主体身份认证和管理方式要求差异较大&#xff1b;在着力发展…

高性能 Java 本地缓存 Caffeine 框架介绍及在 SpringBoot 中的使用

在现代应用程序中&#xff0c;缓存是一种重要的性能优化技术&#xff0c;它可以显著减少数据访问延迟&#xff0c;降低服务器负载&#xff0c;提高系统的响应速度。特别是在高并发的场景下&#xff0c;合理地使用缓存能够有效提升系统的稳定性和效率。 Caffeine 是一个高性能的…

《程序猿入职必会(4) · Vue 完成 CURD 案例 》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

Eclipse的一些使用

出错的原因: eclipse中&#xff0c;当声明了变量&#xff0c;没有进行初始化&#xff0c;然后在方法中引用该变量的时候&#xff0c;就会报出如下错误&#xff1a; The local variable XXX may not have been initialized意思是该变量没有进行初始化&#xff0c;解决这个错误就…

【C++刷题】优选算法——队列+宽搜

N 叉树的层序遍历 vector<vector<int>> levelOrder(Node* root) {vector<vector<int>> ret;if (root nullptr) return ret;queue<Node*> q;q.push(root);ret.push_back({root->val});int size 1;while (!q.empty()) {vector<int> v…

【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作

引言 Jupyter Notebook 是一个交互式计算环境&#xff0c;它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…

CSS性能优化:从加载速度到渲染效率的全方位提升

在快节奏的互联网环境中&#xff0c;网页的加载速度和渲染效率直接关系到用户体验和搜索引擎排名。CSS作为网页样式的主要描述语言&#xff0c;其性能优化同样不容忽视。本文将介绍一系列CSS性能优化的策略&#xff0c;帮助开发者从加载速度到渲染效率实现全方位的提升。 1. 压…

从零开始学习网络安全渗透测试之基础入门篇——(二)Web架构前后端分离站Docker容器站OSS存储负载均衡CDN加速反向代理WAF防护

Web架构 Web架构是指构建和管理Web应用程序的方法和模式。随着技术的发展&#xff0c;Web架构也在不断演进。当前&#xff0c;最常用的Web架构包括以下几种&#xff1a; 单页面应用&#xff08;SPA&#xff09;&#xff1a; 特点&#xff1a;所有用户界面逻辑和数据处理都包含…

vscode container

附加到已有容器 终端进程“/sbin/nologin”启动失败(退出代码: 1)。 原因是因为默认vscode container 使用default 这个用户进行登陆。而这个default 是使用shell 的&#xff08;在/etc/passwd中配置&#xff09;。我们要修改vscode 行为&#xff0c;添加默认的bash 终端启动…

劝你不要上自动化立体库,非要上,砸锅了吧

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 在当今这个科技日新月异的时代&#xff0c;自动化立体库作为仓储物流领域的佼佼者&#xff0c;以其高效、精准、节省人力的优势&#xff0c;吸引…

Windows下帆软BI(finebi)单机部署移植(Tomcat)攻略

一、基础环境 操作系统&#xff1a;Windows 10 64bit 帆软BI 版本&#xff1a;V9.0/V10.0 HTTP工具&#xff1a;Tomcat 外置数据库&#xff1a;Oracle 11g 实验内容&#xff1a;将已经部署好的帆软BI从一台电脑移植到另一台电脑 二、前期准备 1、做好外置数据库移植&…

spring —— IoC 容器(一)

IoC 不是一种技术&#xff0c;而是一种设计思想&#xff0c;旨在降低代码之间的耦合性。Spring 通过 IoC 容器管理所有 Java 对象的实例化和初始化&#xff0c;控制对象与对象之间的依赖关系。 一、基于 XML 管理 bean &#xff08;一&#xff09;通过 XML 获取 bean public…

【Three.js基础学习】17.imported-models

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 课程回顾&#xff1a; 如何在three.js 中引入不同的模型&#xff1f; 1. 格式 &#xff08;不同的格式&#xff09; https://en.wikipedia.org/wiki/List_of_file_form…

杭州东网约车管理再出行方面取得的显著成效

随着科技的飞速发展&#xff0c;网约车已成为人们日常出行的重要选择。在杭州这座美丽的城市&#xff0c;网约车服务更是如雨后春笋般蓬勃发展。特别是杭州东站&#xff0c;作为杭州的重要交通枢纽&#xff0c;网约车管理显得尤为重要。近日&#xff0c;沧穹科技郑重宣告已助力…

达梦数据库系列—33.日志总结

目录 1、SQL日志 SQL 日志开启 SQL日志分析 2、Redo日志 3、归档日志 联机配置归档 手动配置归档 归档信息的查看 清理归档日志 4、闪回 查看闪回功能状态 开启闪回 闪回查询 5、其他事件日志 数据库实例日志 DMAP进程日志 数据库备份日志 dmwatcher日志 dm…