需要用到的js : jSignature.min.js, jquery-3.0.0.min.js
心情不好,看底下例子代码,有注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jSignature.min.js"></script>
</head>
<body>
<table width="95%" align="center">
<tr>
<td height="57" colspan="4" align="left" >
<fieldset style="border: 1px solid green; width:96% ">
<legend>Signature</legend>
<div id="signature" style="width:99%">
</div>
</fieldset>
</td>
</tr>
<tr>
<td>
<button id="test" onClick="ToImgBaseData();">ToImgData</button>
</td>
</tr>
</table>
<script>
$("#signature").jSignature(); //把签字板放入div
//var $sigdiv = $("#signature"); $sigdiv.jSignature("reset");(这两句代码为清空签字板,说白了就是签错了需要重置的时候用)
function ToImgBaseData()//把签字板的内容转成图片的数据流
{
var $sigdiv = $("#signature");
//$("#signature").jSignature({'decor-color':'#fff','height':'200px','width':'100%'}) 这行代码为放入div时加上一些高度和宽度的设置,decor-color为设置签字底线的颜色,如果不想要底线就把它设为跟背景色一致即可
var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式，具体可以参考官方文档
var imagebase64 = datapair[1].replace(/\+/g, '+');
console.log(imagebase64); //console.log出来的调试信息在浏览器的f12中查看,不会的也可以用alert(imagebase64),得到的数据流可以开文件句柄转成实际图片文件,不过需要base64解码
}
</script>
</body>
</html>
ps: 如果需要判断是否又在签字板签字可用if($(’#signature’).jSignature(‘getData’, ‘native’).length<=0)
