JSsignature_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