Signature Pad 使用

这篇博客介绍了如何在移动设备上实现电子签名功能,通过引入signature_pad库并结合JavaScript实现签名面板。用户可以进行签名,然后将签名保存为PNG格式的图片。文章详细阐述了代码实现过程,包括签名的显示、清除、保存和判断签名是否为空的API调用。同时,还解决了签名保存后可能出现的背景色问题。最后,提到了相关参数配置以及事件监听,以确保签名体验流畅。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目的:能够在移动设备上实现电子签名,并保存为图片。
使用:1. npm安装: npm install signature_pad --save
main.js中use()
import SignaturePad from ‘signature_pad’
2.本地文件或csdn引入:

<script src = "https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js "> </script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/example/css/signature-pad.css">

页面:

<div id="signature-pad" class="signature-pad">
        <div class="description tc">签名区域</div>
        <div class="signature-pad--body">
            <canvas id="signature-canvas"></canvas>
            <i class="leftup lefta"></i>
            <i class="leftup rightup"></i>
            <i class="leftup leftdown"></i>
            <i class="leftup rightdown"></i>
        </div>
        <div class="signature-pad--footer">
            <button type="button" class="buttonclear clear" id="clear" data-action="clear">重签</button>
            <button type="button" class="buttonclear clear" id="save" data-action="clear">确定</button>
        </div>
    </div>
    var canvas = document.getElementById('signature-canvas');
    var signaturePad = new SignaturePad(canvas, { backgroundColor: '#DEDEDE', penColor: 'rgb(0, 0, 0)' });
    var saveButton = document.getElementById('save');
    var cancelButton = document.getElementById('clear');
    saveButton.addEventListener('click', function (event) {
        // 签名为空的判断
        if(signaturePad.isEmpty()){
            alert("不能为空")
        }
        // signaturePad.jSignature('getData');
        var imgStr = signaturePad.toDataURL('image/png');
        //获取到image的base64 可以把这个传到后台解析成图片
        //imgStr = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......
        //去掉data:image/png;base64,我们只要后面的部分iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......
        imgStr=imgStr.substring(22,imgStr.length);
        $.ajax({
            type: "POST",
            url: "",
            data:{
                imgStr:imgStr
            },
            dataType:"json",
            success: function(data){

            }
        });

    });
    cancelButton.addEventListener('click', function (event) {
        signaturePad.clear();
    });
    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1); // 清除画布
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear();
    }
    window.onresize = resizeCanvas;
    resizeCanvas();

API:

toDataURL():保存为图片,默认保存为png,toDataURL("image/jpeg")-保存为jpg,toDataURL("image/svg+xml")-保存为svg
isEmpty():签名是否为空
clear():清空签名
toData():返回签名点的数组
fromData()off():解绑所有事件
on():重新绑定所有事件

参数:

dotSize:点的大小(在屏幕上点击留下的点大小,单位:px)
minWidth: 线的最小宽度(单位:px,默认:0.5)
maxWidth:线的最大宽度(单位:px,默认:2.5)
throttle:节流(每次绘制两个点之间的时间,单位:ms,默认:16,注意:设置过大会显得很卡顿)
minDistance:最小距离(每次绘制两个点之间的最小距离,单位:px,默认:5)
backgroundColor:背景色(默认:#000)
penColor:线条颜色(默认:#fff)
velocityFilterWeight:根据速度控制线的weight(默认:0.7)
onBegin:一笔开始时触发的事件
onEnd:一笔结束时触发的事件

注意:

保存后图片背景色为黑色:
这个问题主要是有两个方面造成的:一个是插件默认为黑色透明的背景色;一个是我保存了jpg格式的。
如果想要透明背景色,直接保存为png格式,无需设置背景色,用默认的即可
signaturePad.toDataURL("image/jpeg");
signaturePad.toDataURL("image/png");

### 关于 `signature_pad` 的使用教程 #### 创建签名画板实例 为了创建一个基本的签名画板,首先需要引入 `signature_pad.js` 文件以及关联样式文件到HTML页面中。接着,在文档内定义一块 `<canvas>` 元素作为绘制区域。 ```html <canvas id="signature-pad" class="signature-pad" width=500 height=200></canvas> <script src="path/to/signature_pad.min.js"></script> ``` #### 初始化 SignaturePad 对象并配置选项 通过 JavaScript 实例化一个新的 `SignaturePad` 类对象,并传入对应的 Canvas DOM 节点和其他可选参数来定制行为特性: ```javascript // 获取Canvas元素节点 const canvas = document.getElementById('signature-pad'); if (!canvas) { throw new Error('Canvas not found!'); } // 设置Canvas尺寸自适应窗口大小变化 function resizeCanvas() { const ratio = window.devicePixelRatio || 1; canvas.width = canvas.offsetWidth * ratio; canvas.height = canvas.offsetHeight * ratio; canvas.getContext("2d").scale(ratio, ratio); } window.onresize = resizeCanvas; resizeCanvas(); // 新建SignaturePad实例 var signaturePad = new SignaturePad(canvas, { backgroundColor: "rgba(255, 255, 255, 0)", // 设定背景颜色透明度 penColor: "rgb(66, 133, 244)" // 定义笔触的颜色 }); ``` #### 添加交互功能按钮 为了让用户体验更加友好,可以增加一些辅助性的操作控件比如清除当前绘画内容、保存图片等功能按键。 ```html <div> <button type="button" onclick="clearPad()">Clear</button> <button type="button" onclick="savePadAsPng()">Save as PNG</button> </div> <script> function clearPad(){ signaturePad.clear(); // 清除所有已绘图形 } function savePadAsPng(){ if (signaturePad.isEmpty()) { alert("Please provide a signature first."); } else { var dataURL = signaturePad.toDataURL(); // 将签名转换成PNG格式的数据链接 window.open(dataURL); // 打开新标签页展示图像预览效果 } } </script> ``` 以上就是基于 HTMLJavaScript 构建简单版在线手写签名系统的实现过程[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值