signature_pad

npm install --save signature_pad

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

或者


//生成签字区域
var canvasX = $("#canvas")[0];
signaturePad = new SignaturePad(canvasX,{
    dotSize : 0 ,
    velocityFilterWeight :1,
    minWidth: 2.0,
    maxWidth: 5.2,
    penColor: "rgb(0,0,0)",
    backgroundColor:"rgb(0,0,0,0)"
});

//生成图片

$('.btnReady').click(function() {
    if(signaturePad.isEmpty()){
        JSBridge.showToast("画布为空,请先手绘签名再提交!");
    }else{
        var canvas = document.getElementById("canvas");
        //获取图片的Base64,包含头信息data:image/png;base64,
        var canvasData = canvas.toDataURL("image/png");
        /* canvasData = encodeURIComponent(encodeURIComponent(canvasData));    */
        //alert(canvasData);
        //去掉图片Base64中的头信息data:image/png;base64,直接可作为sealData使用
        var image_base64= canvasData.split(",")[1];
        //alert(image_base64);
        // document.getElementById("sealData").value=image_base64;
        saveSignature(image_base64);
        //此处提交您的手写签名数据canvasData
    }
});

微信小程序 参考 : git@github.com:yuweilan/weixin-signature.git

标签: none

添加新评论