当前位置: 首页 > 工具软件 > jSignature > 使用案例 >

jSignature 移动端在线签名

鲍钊
2023-12-01

一、基本介绍

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:设置 数据

 类似资料: