jSignature移动端在线签名
⼀、基本介绍
jSignature是⼀个jQuery插件，它简化了创建签名捕获场的浏览器窗⼝，允许⽤户使⽤⿏标，笔，或⼿指画⼀个签名。
jSignature捕捉签名⽮量轮廓的笔触。虽然jSignature可以导出⼤位图（PNG）也⼀样，提取签名的⾼度可扩展的⾏程运动坐标（⼜名向量图）允许签名呈现更⼤的灵活性。
⽀持主要的台式机，平板电脑和⼿机浏览器的⽀持。HTML5 Canvas元素默认情况下使⽤。我们依傍基于Flash的Canvas元素模拟器（FlashCanvas）时，不⽀持浏览器的实际画布（ie8 以下）。
⼆、使⽤说明
下⾯是JSignature使⽤过程。
第⼀步：加⼊jSignature到你的页⾯中
需要⽤到插件：
将上⾯两个插件引⼊⼯程中，如下截图：
并在html页⾯加载如下代码：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jSignature.js"></script>
第⼆步，添加画布
<div id="signature"> <!--id名随便命名，符合命名规则即可-->
第三步 初始化画布
$sigDiv.jSignature({
color: "#000",
lineWidth: 3,
height: h + 'px',
width: sw + 'px',
"background-color": "#fff"
});
爽我这⾥对画布传了⼀些参数，⽐如字体颜⾊为color:"#000"，线条宽度lineWidth:3，画布⾼度为h，宽度为sw，画布背景颜⾊为#fff。当然你也可使⽤默认的初始化画布，代码如下：
$("#signature").jSignature();
第四步，签名
初始完毕后就可以在画布上进⾏签名，当然，此时画布没有预览功能，没有重置功能，下⾯是签名预览和签名重置。，代码如下：
预览：
$("#btnSave").click(function() {
var ht = $("#someelement").html();
if(Boolean(ht)) {
$("#someelement").html("");
}
var data = $sigDiv.jSignature("getData", "image");
if($.isArray(data) && data.length == 2) {
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
jquery在线库
$(i).appendTo($("#someelement"));
var base64 = 'data:' + data.join(',');
console.log(base64);
}
});
var data = $sigDiv.jSignature("getData", "image")；该代码是获得画布⾥的内容。重置：
$("#btnReset").click(function() {
$sigDiv.jSignature("clear");
$("#someelement").html("");
});
完整代码见附件：
三、API说明
init：初始化
reset：复位/重置
getData：获取数据
setData：设置 数据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。