页面效果如下
本地保存的电子签名图片如下
具体实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电子签名</title>
<style>
#canvas {
border: 1px solid #000;
margin-bottom: 10px;
margin-left: 50px;
}
button {
width: 300px;
height: 150px;
font-size: 100px;
margin-left: 50px;
}
h1 {
margin-left: 50px;
}
p {
margin-left: 50px;
}
</style>
</head>
<body>
<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>
<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);
drawWatermarkDateTime(getNowDateTime(false), 'blue');
// 创建临时链接并设置下载属性
var link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = fileName + '.png';
// 触发链接点击事件
link.click();
alert("签名已保存！");
// 清空
clearCanvas();
}
// 在canvas上绘制日期时间水印
function drawWatermarkDateTime(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 date = new Date();
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
var hours = ("0" + date.getHours()).slice(-2);
var minutes = ("0" + date.getMinutes()).slice(-2);
var seconds = ("0" + date.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>
标签：function,canvas,JS,电子签名,context,addEventListener,var,logo,event From： https://www.cnblogs.com/xiaomaju/p/17722447.html