Signature Pad 使用

目的：能够在移动设备上实现电子签名，并保存为图片。
使用：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");