signature pad java_2020-07-08 JSsignature_pad 无纸化电子签名

image.png

无纸化签名

签名区域

重签

确定

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();

方法：

方法名称 使用方法 说明

clear .jSignature("clear") 清空并重置画布

getData .jSignature("getData", "base30") 将画布转换为base64编码的数据字符串，可以在表单发布或提交时将其保存为任何数据库中的字符串

importData .jSignature("importData",dataurl) 使用从上述getData方法提取的数据URL更新现有的jSignature画布

选项参数：

参数名称 说明 默认值

width 定义画布的宽度。 没有％或px的数值(新版是可以使用百分比和px后缀的) 250

height 定义画布的高度。 没有％或px的数值(新版是可以使用百分比和px后缀的) 150

color 定义画布上笔画的颜色。 接受任何颜色十六进制值 #000

background-color 定义画布的背景颜色。 接受任何颜色十六进制值 #fff

lineWidth 定义线的厚度。 接受任何正数值(也是默认画布的横线的画笔的宽度) 1

cssclass 定义画布的自定义css类 None