JS实现电子签名，并且将带logo和时间水印的电子签名保存到本地-526互联

页面效果如下
本地保存的电子签名图片如下
具体实现代码如下
<!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>