jSignature 移动端在线签名

一、基本介绍

jSignature是一个jQuery插件，它简化了创建签名捕获场的浏览器窗口，允许用户使用鼠标，笔，或手指画一个签名。

jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图（PNG）也一样，提取签名的高度可扩展的行程运动坐标（又名向量图）允许签名呈现更大的灵活性。

支持主要的台式机，平板电脑和手机浏览器的支持。HTML5 Canvas元素默认情况下使用。我们依傍基于Flash的Canvas元素模拟器（FlashCanvas）时，不支持浏览器的实际画布（ie8 以下）。

二、使用说明

下面是JSignature使用过程。

第一步：加入jSignature到你的页面中 

需要用到插件：

1）JQuery插件,可以到http://jquery.com/下载

2)JSignature插件，到http://willowsystems.github.io/jSignature/#/about/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];

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

});

完整代码见附件：

JSignatureSimpleDemon.rar

三、API说明

init：初始化
reset：复位/重置
getData:获取数据
setData:设置 数据