主页 / 问题 / 1052687
Accepted
Ivan
Asked:2020-12-01 00:38:34 +0000 UTC2020-12-01 00:38:34 +0000 UTC

在网站上用手写笔签署文件

  • 772

您需要在您的网站上添加一些“协议签名”框，用于手写笔或触摸屏文档。请告诉我如何做到这一点。如果有人遇到同样的问题，请告诉我你是如何解决的？

谢谢））

javascript

2 个回答

  1. Best Answer

    您将需要一个画布来绘制。然后您可以将其内容拉入Blob并保存到您的计算机/上传到服务器...

    <canvas width="500" height="300"></canvas>
<button>save to png</button>
<script>
    (function() {
        const canvas = document.querySelector("canvas");
        const button = document.querySelector("button");

        let click = false;
        let xCoord = NaN;
        let yCoord = NaN;

        const  cntx = canvas.getContext("2d");
        cntx.strokeStyle = "red";
        cntx.lineWidth = 10;
        cntx.lineCap = "round";
        cntx.fillStyle = "#fff";
        cntx.fillRect(0, 0, canvas.width, canvas.height);

        canvas.onmousedown = canvas.ontouchstart  = (e) => {
            click = true;
            xCoord = (e.pageX || parseInt(e.touches[0].pageX)) - canvas.offsetLeft;
            yCoord = (e.pageY || parseInt(e.touches[0].pageY)) - canvas.offsetTop;
        };
        canvas.onmouseup = canvas.ontouchend = () => {
            click = false;
        };
        canvas.click = () => {
            click = false;
        };
        canvas.onmousemove = canvas.ontouchmove = (e) => {
            if (click === true) {
                cntx.beginPath();
                cntx.moveTo(
                    (e.pageX || parseInt(e.touches[0].pageX)) - canvas.offsetLeft,
                    (e.pageY || parseInt(e.touches[0].pageY)) - canvas.offsetTop,
                );
                cntx.lineTo(xCoord, yCoord);
                cntx.stroke();
                cntx.closePath();
                xCoord = (e.pageX || parseInt(e.touches[0].pageX))- canvas.offsetLeft;
                yCoord = (e.pageY || parseInt(e.touches[0].pageY)) - canvas.offsetTop;
            } else {
                return;
            }
        };
        button.onclick = () => {
            const data = canvas.toDataURL("image/png", 100);
            const link = document.createElement("a");
            link.href = data;
            link.download = "image.png";
            link.click();
            window.URL.revokeObjectURL(data);
        };
    })();
</script>

    该设计(e.pageX || parseInt(e.touches[0].pageX))允许您支持与鼠标移动同等的触摸屏事件。

    • 3

  2. 我还在 hithab 上找到了一个使用 HTML5 画布编写的现成解决方案，它提供了自己的签名版本。在实践中测试，一切正常。https://github.com/szimek/signature_pad

    • 0

相关问题