html+canvas 實現簽名功能-手機觸控

darling331發表於2024-07-18
HTMLCanvas

手機上的效果圖

image

需要注意，手機觸控和滑鼠不是一個事件，不能通用，上一篇是關於使用滑鼠的樣例

相關程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .buttons {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>
        <canvas id="signatureCanvas" width="500" height="200" style="border:solid;"></canvas>
        <button onclick="clearSignature()">清除</button>
        <button onclick="undoLast()">清除上一步</button>
        <button onclick="saveSignature()">儲存</button>
    </div>
    <script>
        const canvas = document.getElementById('signatureCanvas');
        const ctx = canvas.getContext('2d');

        let isDrawing = false;
        let lastX, lastY;
        let strokes = []; // 用於儲存每一步的繪製操作

        // 觸控開始事件
        function handleTouchStart(e) {
			e.preventDefault(); // 阻止預設的觸控事件
            isDrawing = true;
            [lastX, lastY] = [e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop];
            strokes.push([]); // 開始新的筆畫
        }

        // 觸控移動事件
        function handleTouchMove(e) {
			e.preventDefault(); // 阻止預設的觸控事件
            if (!isDrawing) return; // 如果沒有觸控，則退出函式

            const x = e.touches[0].clientX - canvas.offsetLeft;
            const y = e.touches[0].clientY - canvas.offsetTop;

            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.stroke();

            strokes[strokes.length - 1].push({ x: lastX, y: lastY, x2: x, y2: y }); // 記錄當前筆畫

            [lastX, lastY] = [x, y];
        }

        // 觸控結束事件
        function handleTouchEnd(e) {
			e.preventDefault(); // 阻止預設的觸控事件
            isDrawing = false;
        }

        // 清除簽名
        function clearSignature() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            strokes = []; // 清空所有筆畫記錄
        }

        // 撤銷上一步
        function undoLast() {
            strokes.pop(); // 移除最後一個筆畫
            redraw(); // 重新繪製畫布
        }

        // 重新繪製畫布
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空畫布
            strokes.forEach(stroke => {
                stroke.forEach(line => {
                    ctx.beginPath();
                    ctx.moveTo(line.x, line.y);
                    ctx.lineTo(line.x2, line.y2);
                    ctx.stroke();
                });
            });
        }

        // 儲存簽名
        function saveSignature() {
            const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            // 將圖片資料轉換成 base64 格式
            const base64ImageData = canvas.toDataURL();
            console.log(base64ImageData);
        }

        // 繫結事件
        canvas.addEventListener('touchstart', handleTouchStart);
        canvas.addEventListener('touchmove', handleTouchMove);
        canvas.addEventListener('touchend', handleTouchEnd);
        canvas.addEventListener('touchcancel', handleTouchEnd);
    </script>
</body>

</html>

相關文章