使用 canvas 实现手写绘图功能

最新推荐文章于 2023-05-23 14:34:36 发布

天猫精灵998

最新推荐文章于 2023-05-23 14:34:36 发布

阅读量703

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_43487782/article/details/114138306

版权

Javascript 专栏收录该内容

106 篇文章 5 订阅

订阅专栏

之前做过一个手绘签名功能，当时用的是第三方插件。后来看了下 canvas 文档，感觉自己写也不是很难，因此本人自己也实现了一个，支持清空画布，保存为 DataUrl ，保存为 Blob ，以及下载到本地。由于实现撤销功能需要保存 imageData ，内存开销太大，暂时先不做了。

代码如下：

<!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">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <div class="tool-bar">
        <button onclick="clearDrawer()">重画</button>
        <button onclick="handleSaveDataUrl()">保存为DataUrl</button>
        <button onclick="handleSaveBlob()">保存为Blob</button>
        <button onclick="handleDownload()">保存到本地</button>
    </div>
</body>
<script type="text/javascript">
    var x = 0;
    var y = 0;

    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");

    c.onmousedown = function (e) {
        x = e.clientX - 8;
        y = e.clientY - 8;
        c.onmousemove = function (e) {
            var newX = e.clientX - 8;
            var newY = e.clientY - 8;
            cxt.moveTo(x, y);
            cxt.lineTo(newX, newY);
            cxt.stroke();
            x = newX;
            y = newY;
        }
    }

    c.onmouseout = function (e) {
        // 鼠标移出绘图区域停止绘图
        c.onmousemove = null;
    }

    c.onmouseup = function (e) {
        // 鼠标按键松开停止绘图
        c.onmousemove = null;
    }

    function clearDrawer() {
        // 当 canvas 的高度或宽度被重设时，画布内容就会被清空
        c.height=c.height;
    }

    // 鉴于 imageData 的内存开销比较大，撤销功能先不做了
    // function savaPath() {
    //     imageData = cxt.getImageData(0,0,c.width,c.height);
    // }

    // function goBack() {
    //     if (!imageData) return
    //     cxt.putImageData(imageData,0,0);
    // }

    function handleSaveDataUrl() {
        console.log(c.toDataURL())
        // 调用接口将Base64字符串传给后台
    }

    function handleSaveBlob() {
        c.toBlob((blob) => {
            console.log(blob)
            // 调用接口将二进制文件流传给后台
            // 注意请求头的Content-type: application/octet-stream
        })
    }

    function handleDownload() {
        let time = new Date().getTime();
        c.toBlob((blob) => {
            let objectUrl = URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = objectUrl;
            a.download = `测试下载-${time}.png`;
            document.body.appendChild(a);
            a.click();
            // URL.revokeObjectURL(objectUrl);
            a.remove();
        })
    }

</script>
</html>

更多 API 参考：
HTML 5 Canvas 参考手册

天猫精灵998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用 canvas 实现手写绘图功能

使用 canvas 实现绘图功能，代码如下：<!DOCTYPE HTML><html><style>body { /* background: rgb(40, 44, 52); */}</style><body><canvas id="myCanvas" width="800" height="500" style="border:1px solid #c3c3c3;">Your browser does not
复制链接

扫一扫