手写签名源码

2025-4-18 12:33| 发布者: admin| 查看: 6| 评论: 0
摘要: 手写签名源码： canvas id="signatureCanvas" width="400" height="200"/canvas input type="hidden" id="signature" name="signature" value="" br i
手写签名源码：
<br>
window.onload = function() {
            var canvas = document.getElementById("signatureCanvas");
            var ctx = canvas.getContext("2d");
            var drawing = false;

            canvas.addEventListener("mousedown", function(e) {
                drawing = true;
                ctx.beginPath();
                var rect = canvas.getBoundingClientRect();
                ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
            });

            canvas.addEventListener("mousemove", function(e) {
                if (drawing) {
                    var rect = canvas.getBoundingClientRect();
                    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
                    ctx.stroke();
                }
            });

            canvas.addEventListener("mouseup", function() {
                drawing = false;
            });

            // 触屏支持
            canvas.addEventListener("touchstart", function(e) {
                drawing = true;
                var rect = canvas.getBoundingClientRect();
                ctx.beginPath();
                ctx.moveTo(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top);
            });

            canvas.addEventListener("touchmove", function(e) {
                if (drawing) {
                    var rect = canvas.getBoundingClientRect();
                    ctx.lineTo(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top);
                    ctx.stroke();
                }
            });

            canvas.addEventListener("touchend", function() {
                drawing = false;
            });
        }

        function startSignature() {
            var canvas = document.getElementById("signatureCanvas");
            var ctx = canvas.getContext("2d");

            // 将 canvas 设置为全屏大小
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            canvas.style.position = 'fixed';
            canvas.style.top = '0';
            canvas.style.left = '0';
            canvas.style.width = '100vw';
            canvas.style.height = '100vh';
            canvas.style.zIndex = '1000';
            canvas.style.backgroundColor = '#fff';

            // 设置线宽度为10
            ctx.lineWidth = 10;

            // 禁止页面滚动
            document.body.style.overflow = 'hidden';

            // 添加确认签名和清空按钮
            var confirmButton = document.createElement("button");
            confirmButton.innerText = "确认";
            confirmButton.style.position = 'fixed';
            confirmButton.style.bottom = '20px';
            confirmButton.style.right = '20px';
            confirmButton.style.zIndex = '1001';
            confirmButton.style.padding = '10px 20px';
            confirmButton.style.backgroundColor = '#007bff';
            confirmButton.style.color = '#fff';
            confirmButton.style.border = 'none';
            confirmButton.style.borderRadius = '5px';
            confirmButton.style.cursor = 'pointer';
            confirmButton.id = 'qr';
            confirmButton.onclick = function() {
                Signature();
            };
            document.body.appendChild(confirmButton);

            var clearButton = document.createElement("button");
            clearButton.innerText = "清空";
            clearButton.style.position = 'fixed';
            clearButton.style.bottom = '20px';
            clearButton.style.right = '150px';
            clearButton.style.zIndex = '1001';
            clearButton.style.padding = '10px 20px';
            clearButton.style.backgroundColor = '#dc3545';
            clearButton.style.color = '#fff';
            clearButton.style.border = 'none';
            clearButton.style.borderRadius = '5px';
            clearButton.style.cursor = 'pointer';
            clearButton.id = 'qk';
            clearButton.onclick = function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            };
            document.body.appendChild(clearButton);
        }

        function clearSignature() {
            var canvas = document.getElementById("signatureCanvas");
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function Signature() {
            var canvas = document.getElementById("signatureCanvas");
            var ctx = canvas.getContext("2d");

            // 恢复 canvas 的原始大小和样式
            canvas.style.position = 'static';
            canvas.style.width = '400px';
            canvas.style.height = '200px';
            canvas.style.zIndex = 'auto';
            canvas.style.backgroundColor = 'transparent';

            // 恢复线宽度为默认值
            ctx.lineWidth = 1;

            // 移除确认签名和清空按钮
            var confirmButton = document.getElementById('qr');
            if (confirmButton) {
                confirmButton.remove();
            }
            var clearButton = document.getElementById('qk');
            if (clearButton) {
                clearButton.remove();
            }

            // 恢复页面滚动
            document.body.style.overflow = 'auto';
        }

        function submitForm() {
            var canvas = document.getElementById("signatureCanvas");
            var ctx = canvas.getContext("2d");
            var signatureData = canvas.toDataURL(); // 获取 Base64 编码的签名数据
            document.getElementById("signature").value = signatureData;

            // 检查 canvas 是否为空
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var isEmpty = true;
            for (var i = 0; i < imageData.data.length; i++) {
                if (imageData.data[i] !== 0) {
                    isEmpty = false;
                    break;
                }
            }
            if (isEmpty) {
                alert('请签名');
                return;
            }

            document.forms[0].submit();
        }
鲜花
握手
雷人
路过
鸡蛋
上一篇：ASP上传接口源码
手写签名源码

相关分类
