H5 Canvas 签名-CSDN博客

本文链接：https://blog.csdn.net/linyisonger/article/details/137018180

本文介绍了一个简单的HTML5页面，使用CanvasAPI实现画笔绘制、重置功能，并提供一个按钮用于将画布内容保存为图片。代码展示了如何监听鼠标和触屏事件，以及如何将Base64编码的图像转换为Blob对象以便下载。

摘要由CSDN通过智能技术生成

一个比较简单的示例，仅实现了画笔绘制、重置、保存图片功能。
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">


    <style>
        #drawingBoard {
            width: 100vw;
            height: 90vh;
        }

        #drawingBoardTips {
            position: absolute;
            top: 0;
            width: 100vw;
            height: 90vh;
            pointer-events: none;
            font-size: 28px;
            text-align: center;
            line-height: 90vh;
            color: #999;
            border: 2px dashed #999;
            box-sizing: border-box;
        }

        button {
            border: none;
            padding: 0px 20px;
            line-height: 30px;
            background-color: #e8e8e8;
            white-space: nowrap;
        }

        button:active {
            opacity: .7;
        }
    </style>
</head>

<body>
    <canvas id="drawingBoard"></canvas>
    <div id="drawingBoardTips">
        按住鼠标左键进行绘制
    </div>
    <div>
        <button id="resetBtn">重绘</button>
        <button id="saveBtn">保存</button>
    </div>
    <script type="module">
        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector("#drawingBoard")
        let ctx = canvas.getContext('2d')
        let width = canvas.clientWidth;
        let height = canvas.clientHeight;
        canvas.width = width;
        canvas.height = height;

        // 画笔设置
        ctx.strokeStyle = "rgb(0,0,0)" // 设置颜色
        ctx.lineWidth = 3 // 设置粗细
        ctx.lineJoin = "round" // 柔和点

        // 电脑
        // canvas.addEventListener("mousemove", (ev) => {
        //     if (ev.buttons == 1) {
        //         ctx.lineTo(ev.offsetX, ev.offsetY)
        //         ctx.stroke()
        //     }
        // })

        // canvas.addEventListener("mouseup", (ev) => {
        //     ctx.beginPath();
        // })


        // 手机
        canvas.addEventListener("touchmove", (ev) => {
            let { clientX, clientY } = ev.touches[0]
            ctx.lineTo(clientX, clientY)
            ctx.stroke()
        })
        canvas.addEventListener("touchend", (ev) => {
            ctx.beginPath();
        })

        document.querySelector('#resetBtn').addEventListener("click", (ev) => {
            ctx.clearRect(0, 0, width, height)
        })

        document.querySelector('#saveBtn').addEventListener('click', (ev) => {
            let a = document.createElement('a');
            a.href = window.URL.createObjectURL(base64ToBlob(canvas.toDataURL()));
            a.setAttribute('download', '个人签名.png');
            a.click();
        })

        // base64 转 Blob
        function base64ToBlob(base64) {
            let arr = base64.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime })
        }
    </script>


</body>

</html>