--- theme: channing-cyan --- 今天学习一下如何手打一个电子签名组件。 ## 效果图签字组件.png

## 思路 * 使用 `canvas` 创建一个画布，绘制路径 * 然后把 `canvas` 输出为一张 base64图片 ## 实现 ### 1. 创建一个 canvas `SignCanvas.vue` ```html ``` ### 2. 定义一个画笔方法。 ```js function brush(beginX, beginY, stopX, stopY) { context.beginPath() // 开启一条新路径 context.lineWidth = 3 // 设置线宽 // context.globalAlpha = 1 // 设置图片的透明度 // context.strokeStyle = 'black' // 设置路径颜色 // context.linePressure = 1.2 // 设置笔触压力 // context.smoothness = 30 // 设置笔触大小变化的平滑度 context.moveTo(beginX, beginY) // 从(beginX, beginY)这个坐标点开始画图 context.lineTo(stopX, stopY) // 定义从(beginX, beginY)到(stopX, stopY)的线条（该方法不会创建线条） context.closePath() // 结束该条路径必须！！ context.stroke() // 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。 } ``` ### 3. 监听画板画笔事件 ```js function init() { let beginX, beginY // context = canvasEl.value.getContext('2d') canvasEl.value.addEventListener('touchstart', function (event) { event.preventDefault() // 阻止在canvas画布上签名的时候页面跟着滚动 beginX = event.touches[0].clientX - this.offsetLeft beginY = event.touches[0].pageY - this.offsetTop }) canvasEl.value.addEventListener('touchmove', (event) => { event.preventDefault() // 阻止在canvas画布上签名的时候页面跟着滚动 event = event.touches[0] let stopX = event.clientX - canvasEl.value.offsetLeft let stopY = event.pageY - canvasEl.value.offsetTop brush(beginX, beginY, stopX, stopY) beginX = stopX // 这一步很关键，需要不断更新起点，否则画出来的是射线簇 beginY = stopY }) } ``` ### 4. 重置方法 ```js function resetHandle() { context.clearRect(0, 0, size.width, size.height) // 清除区域内所有痕迹 } ``` ### 5. 非空校验 ```js function isEmpty() { const blank = document.createElement('canvas') // 获取一个空 canvas 对象 blank.width = size.width blank.height = size.height return canvasEl.value.toDataURL() == blank.toDataURL() // 比较值相等则为空 } ``` 6. 文字旋转（记录） ```js function rotateText() { context.save() // 关键！！！保持原始状态 context.translate(size.width / 2, size.height / 2) // 设置旋转中心点为正中心 context.rotate(Math.PI / 2) // 逆时针旋转 90° context.font = 'bold 48px MiSans' context.textAlign = 'center' context.textBaseline = 'middle' context.fillStyle = 'rgba(0, 0, 0, 0.1)' context.fillText('请在此区域签字', 0, 0) context.restore() // 恢复到原始状态 } ``` 7. base64 转 file对象（记录） ```js function base64ToFile(base64String, fileName) { const arr = base64String.split(',') // 解析data URL const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], fileName, { type: mime }) } ``` ## 源码 ```html ``` ## 参考 [H5基于canvas实现电子签名并生成PDF文档 - 掘金](https://juejin.cn/post/6901273585428463624?searchId=20250902143002CBA8231C0B72D53FA6EC) [小程序和H5手写签名 - 掘金](https://juejin.cn/post/6972375376249126949?searchId=20250902143002CBA8231C0B72D53FA6EC)