html5+canvas在线手写签名转Base64图片和签名图片下载

JACKuo

于 2023-09-19 21:57:27 发布

阅读量289

点赞数

分类专栏： html5 文章标签： canva可画 html5 前端

本文链接：https://blog.csdn.net/mygqk/article/details/133047833

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

#亲测，已调试，开箱即用

用html5+canvas实时手写签名，可以直接转存本地图片，也可以生成Base64字符串存储到数据库中。

可以实现在线签单、在线签约功能。

代码如下，复制，存储demo.html即可。

<!DOCTYPE html>
<html>

<head>
    <title>在线手写签名</title>
    <style>
    body {
        background-color: darkcyan;
    }
    </style>
</head>

<body>
    <div>思路：在线手写电子签名，转成Base64字符串数据存储到数据库内，后续可以回调数据转成图片</div>
    <canvas id="canvas" width="200" height="150"></canvas>
    <div>
    	<button onclick="reset();">重写</button>
        <button onclick="savePic()">保存本地</button>
        <button onclick="saveSignature()">保存Base64</button>
     </div>
    <script>
    var canvas = document.getElementById('canvas');
    canvas.width = '200';
    canvas.height = '150';
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 2; //直线的宽度状态设置
    ctx.fillStyle = "#ffffff"; //直线的颜色状态设置
    ctx.strokeStyle = "#058"; //直线的颜色状态设置
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.fillRect(0, 0, 200, 150);
    let isDown = false
    // 鼠标按下
    canvas.addEventListener('mousedown', (e) => {
        isDown = true
        ctx.beginPath() //开始路径
        ctx.moveTo(e.offsetX, e.offsetY); //绘制点移动
    })
    // 鼠标移动
    canvas.addEventListener('mousemove', (e) => {
        if (isDown) {
            ctx.lineTo(e.offsetX, e.offsetY); //绘制直线
            ctx.stroke() //描边
        }
    })
    // 鼠标抬起
    document.documentElement.addEventListener('mouseup', (e) => {
        isDown = false
    })
    // 鼠标经过
    canvas.addEventListener('mouseover', (e) => {
        canvas.style.cursor = 'crosshair'
    })
    // 鼠标离开
    canvas.addEventListener('mouseout', (e) => {
        canvas.style.cursor = 'default'
    })
    // 取消
    function reset() {
        ctx.fillRect(0, 0, 200, 150);
    }
    // 保存图片
    function savePic() {
        var link = document.createElement("a");
        var imgData = canvas.toDataURL({
            format: 'png',
            quality: 1,
            width: 200,
            height: 150
        });
        var strDataURI = imgData.substr(22, imgData.length);
        var blob = dataURLtoBlob(imgData);
        var objurl = URL.createObjectURL(blob);
        link.download = "canvas.png";
        link.href = objurl;
        link.click();
    }

    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });


    }

    // 保存签名为Base64编码
    function saveSignature() {
        var dataURL = canvas.toDataURL(); 	// 将画布转换为Base64编码的数据URL
        var base64 = dataURL.split(',')[1]; // 提取Base64编码部分
        									// 将Base64编码保存到数据库中（这里只是示例，需要将base64替换为您的数据库保存逻辑）
        console.log(base64); 				// 输出到控制台或使用其他方式保存到数据库中
    }
    </script>
</body>

</html>

引用

赢乐作者代码，并在其原码上改良。

原文引用https://blog.csdn.net/shanghai597/article/details/130826638

JACKuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5+canvas在线手写签名转Base64图片和签名图片下载

用html5+canvas实时手写签名，可以直接转存本地图片，也可以生成Base64字符串存储到数据库中。代码如下，复制，存储demo.html即可。可以实现在线签单、在线签约功能。#亲测，已调试，开箱即用。
复制链接

扫一扫