JS实现电子签名，并将带logo和日期时间水印的电子签名图片保存到本地
效果如下
实现代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>电子签名</title> <link rel="icon" href="http://服务器IP/pic/xmj_logo.png"> <style> #canvas { border: 1px solid #000; margin-bottom: 10px; } button { width: 300px; height: 70px; font-size: 50px; line-height: 70px; } </style> </head> <body> <div style="margin-left: 50px;"> <p><strong>电子签名</strong>-请在下方空白处签名：</p> <canvas id="canvas" width="1000" height="600"></canvas> <div> <button id="clearButton">清除</button> <button id="saveButton">保存</button> </div> <p><strong>仅在电脑端浏览器中点击保存按钮可以将电子签名保存到本地</strong></p> </div> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var isDrawing = false; // 开始绘制签名 function startDrawing(event) { isDrawing = true; if (event.type === 'touchstart') { context.beginPath(); context.moveTo(event.touches[0].clientX - canvas.offsetLeft, event.touches[0].clientY - canvas.offsetTop); } else { context.beginPath(); context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); } } // 绘制签名 function draw(event) { if (isDrawing) { event.preventDefault(); if (event.type === 'touchmove') { context.lineTo(event.touches[0].clientX - canvas.offsetLeft, event.touches[0].clientY - canvas.offsetTop); } else { context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); } context.stroke(); } } // 停止绘制签名 function stopDrawing() { isDrawing = false; } // 清除签名 function clearCanvas() { context.clearRect(0, 0, canvas.width, canvas.height); // 重新加载logo drawWatermarkLogo(); } drawWatermarkLogo(); // 保存签名 function saveSignature() { var fileName = getNowDateTime(true) + "_" + (Math.floor(Math.random() * 900) + 100); // 当前日期时间的文本水印 drawWatermarkText(getNowDateTime(false), 'blue'); // 创建临时链接并设置下载属性 var link = document.createElement('a'); link.href = canvas.toDataURL("image/jpg"); link.download = fileName + '.jpg'; // 触发链接点击事件 link.click(); alert("签名已保存！"); clearCanvas(); } // 在canvas上绘制文本水印 function drawWatermarkText(text, color) { context.font = '30px Arial'; context.fillStyle = color; context.fillText(text, canvas.width - 300, canvas.height - 20); } // 在canvas上绘制logo水印 function drawWatermarkLogo() { var image = new Image(); // 当图像加载完成时，将其绘制到canvas上 image.onload = function () { // 在canvas上绘制水印图像 context.drawImage(image, 0, 0); }; image.src = 'http://服务器IP/pic/xmj_logo.png'; // logo图像的路径 } //获取当前日期时间 flag是否为纯数字 function getNowDateTime(flag) { var now = new Date(); var year = now.getFullYear(); var month = ("0" + (now.getMonth() + 1)).slice(-2); var day = ("0" + now.getDate()).slice(-2); var hours = ("0" + now.getHours()).slice(-2); var minutes = ("0" + now.getMinutes()).slice(-2); var seconds = ("0" + now.getSeconds()).slice(-2); if (flag) { return year + month + day + hours + minutes + seconds; } return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; } // 绑定事件监听器 canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); canvas.addEventListener('touchstart', startDrawing); canvas.addEventListener('touchmove', draw); canvas.addEventListener('touchend', stopDrawing); var clearButton = document.getElementById('clearButton'); clearButton.addEventListener('click', clearCanvas); var saveButton = document.getElementById('saveButton'); saveButton.addEventListener('click', saveSignature); </script> </body> </html>
