canvas实现电子签字功能

最新推荐文章于 2025-12-23 04:16:27 发布

原创

最新推荐文章于 2025-12-23 04:16:27 发布 · 2.1k 阅读

标签

#javascript #vue.js #前端

本文介绍如何在前端利用canvas实现电子签字功能，包括需求分析、实现思路和注意点。通过展示协议、创建签字区域并生成签名图片，以及在不同设备和屏幕状态下调整和插入签名。同时提到了Vue开发的相关资源。

1. 需求分析

去银行办理银行卡的时候你会发现，有的是用电子办卡机，大堂经理带着你一步步操作，其中有一个操作就是签署电子协议，那么这个功能具体怎么实现的呢？

2. 实现思路

（1）首先你得把你协议展示出来，并且这些协议是一些后台可编辑的html富文本，接口请求到富文本后，document.getElementById('innerHTML').innerHTML 插入到指定的div上；

（2）其次则是我们的签字区域，整块区域用原生canvas实现，签署完成后生成图片，上传到图库，拿到图片的url后，拼接一个 <img src=\"${imgUrl}\"> 字符，用正则插入到指定标签内；

function saveAgreement() {// 正则 /span\sclass=?."insertSign.+?>.+?<?.span/g	匹配 class = insertSign 的标签（class可以是任意富文本中存在的name）let labelRegex = /span\sclass=?."insertSign.+?>.+?<?.span/g;let labelStr = "";let imgUrl = "";let imgLabel = imgUrl ? `<img src=\"${imgUrl}\" style=\"width:100px; ${orientationScreen ? 'transform: rotate(270deg);' : ''}\">` : "已签名"; // 待替换图片 或 文本while ((labelStr = labelRegex.exec(currentSignStr)) !== null && labelStr[0].indexOf("<img") === -1) {
	console.log("匹配到的标签", labelStr[0]); // 匹配到的标签
	let indexEnd = labelS

最低0.47元/天解锁文章