javascript - 前端如何实现线上签名功能？
以下是我的一个demo，想问问还有没有大神有其他实现方案
<!DOCTYPE html><html><head> <title>在线签名</title></head><body> <canvas id="signatureCanvas" width="400" height="200" style="border: 1px solid #000;"></canvas> <button id="clearButton">清除签名</button> <button id="saveButton">保存签名</button> <script> // 获取canvas元素 const canvas = document.getElementById('signatureCanvas'); const ctx = canvas.getContext('2d'); // 设置画笔属性 ctx.lineWidth = 2; ctx.strokeStyle = 'black'; // 初始化签名状态 let isDrawing = false; let lastX = 0; let lastY = 0; // 鼠标按下时开始签名 canvas.addEventListener('mousedown', (e) => { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY]; }); // 鼠标移动时绘制签名 canvas.addEventListener('mousemove', draw); // 鼠标抬起时停止签名 canvas.addEventListener('mouseup', () => isDrawing = false); canvas.addEventListener('mouseout', () => isDrawing = false); // 清除签名 const clearButton = document.getElementById('clearButton'); clearButton.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); }); // 保存签名（生成签名图片） const saveButton = document.getElementById('saveButton'); saveButton.addEventListener('click', () => { const signatureImage = new Image(); signatureImage.src = canvas.toDataURL(); document.body.appendChild(signatureImage); }); // 绘制函数 function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX, lastY] = [e.offsetX, e.offsetY]; } </script></body></html>共有2个答案
可以用sign-canvas插件实现
这个代码示例使用HTML5的canvas和JavaScript来实现一个基本的在线签名功能。它有以下几个关键部分：
canvas元素：用于显示签名，并可以从中生成图片。ctx对象：canvas的上下文，用于绘制线条和形状。- 画笔属性：设置画笔的线条宽度和颜色。
- 签名状态：包括一个布尔值
isDrawing来标识是否正在绘制签名，以及lastX和lastY来存储上一次绘制的坐标。 - 事件监听器：清除和保存签名的按钮被添加了点击事件监听器。canvas元素添加了鼠标按下、移动、抬起和移出的事件监听器。
在你的代码中，当鼠标按下并移动时，会调用draw函数，它使用上一次绘制的坐标和当前坐标之间的线段来绘制签名。当鼠标抬起时，签名绘制结束。
清除签名的功能通过清除canvas的内容来实现。保存签名的功能通过将canvas的内容转换为图片（data URL）并将图片添加到body元素来实现。
对于其他实现方案，你可能想考虑使用更先进的技术，如SVG或HTML Signature，这些库专门为在线签名而设计，并且可能有更多配置项和更高级的功能。你还可以考虑将签名与后端服务器同步，以便在其他地方使用签名，或者在签名上添加更多的交互性功能，如撤销和重做操作。
-
本文向大家介绍JavaScript前端实现压缩图片功能，包括了JavaScript前端实现压缩图片功能的使用技巧和注意事项，需要的朋友参考一下 为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图
-
本文向大家介绍JS实现移动端在线签协议功能，包括了JS实现移动端在线签协议功能的使用技巧和注意事项，需要的朋友参考一下 在一个风和日丽的下午，刚准备下班，突然接到需求说要做一个在线签协议功能，当时心里想着不就百度一顿拷贝就完事了吗(因为我没用过canvas，所谓初生牛犊不怕虎 )，谁知做起来如此吃力，下面就来记录下历程。 协议模板 分析 如上图，需要做的就是做一个签字板可以在上面写字，写完后点
-
需求：实现一个功能，有多个span标签，内容为用户名，点击span标签，使其以tag的形式出现在一个contentEditable为true的div中，并且tag有背景色和4px的padding，tag不可编辑,当鼠标在div有焦点，则在当前焦点处插入tag,否则将tag加在最后面。 各位有什么实现方案吗 技术：在vue项目中。不要库。原生js实现
-
本文向大家介绍javascript实现移动端上传图片功能，包括了javascript实现移动端上传图片功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了javascript实现移动端上传图片的具体代码，供大家参考，具体内容如下 核心部分(.html) vue项目代码 主要是HTML页面设计 data（）部分 methods:{}部分 css部分（style） 效果图 更多精彩内容请
-
本文向大家介绍javascript如何实现暂停功能，包括了javascript如何实现暂停功能的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考，具体如下： Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实现此功能。 javascript作为弱对象语言，一个函数也可以作为
-
前端这个文档搜索功能怎么实现的？ 我看搜索时没走后端，输入时能瞬间加载出内容，这个搜索是提前将文档缓存到前端吗，为什么每个标题能独立显示