jSignature是什么,如何使用?
jSignature是一个H5基于canvas画布得一个插件可以用于手机,浏览器进行手写签名功能实现啦
Jsignature使用效果展示
注:本插件最新版是支持IE8的,测试请放在本地服务器上测试,不要直接打开,因为一些js的文件请求协议不支持windows本地文件协议,直接上本地服务器测试。
代码实现功能Api
1.引入 jSignature.min.js flashcanvas.js
<script src="flashcanvas.js"></script>
<script src="jSignature.min.js"></script>
下载地址:百度网盘 请输入提取码 提取码 453k
2.首先Div
<div id="signature"></div>
3.初始化
$("#signature").jSignature( );
此时会有画板了可以画了
注:当然你可以初始化时设置画板
var arguments = {width: '100px', //宽height: '100px',//高signatureLine: false,//去除默认画布上那条横线lineWidth: '3', //字体粗细cssclass:'zx', //这个参数是给画板设置css样式 class为zxcolor:'#000000', //画板笔颜色};
方法:
参数解释:
init是默认的,假定的动作。 init需要一个参数 - 一个设置对象。 您可以省略命令,并在init中传递设置对象。 返回(以传统的jQuery链接方式)jQuery对象引用应用插件的元素。
reset
复位只是清除签名板,数据存储(并放回签名线和其他装饰)。 返回(以传统的jQuery链接方式)jQuery对象引用应用插件的元素。
lear
reset别名,历史遗留
getData
接受参数 - 数据格式的名称。 返回适合数据格式的数据对象
setData
需要两个参数 - 数据对象,数据格式名称。 当数据对象是以data-url模式格式化的字符串时,您不需要指定数据dormat名称。 数据格式名称(mime)将从data-url前缀中隐含。 见下面的例子。 返回(以传统的jQuery链接方式)jQuery对象引用应用插件的元素。
importData
setData的别名,历史遗留
listPlugins
接受一个参数 - 表示要列出的插件的类别(仅导出,此时支持的导入)的字符串。 返回字符串数组。
disable
使画布只读,并禁用jSignature按钮
enable
使画布只读,并启用jSignature按钮
isModified
如果jSignature被修改,返回一个布尔值true,否则返回false。
getSettings
返回jSignature实例的可配置设置。
updateSetting
需要三个参数 - 设置名称,新值,布尔值,如果更改应该影响当前签名或将来的笔画。 这允许您更新某些设置,如lineWidth或线条颜色,使用第三个参数可以使更改适用于现有笔画。 目前,更新现有笔画的更改仅适用于像颜色这样的几个设置。 返回更新的值
示例使用:
清除模板使用
$("#signature").jSignature("clear");
使画布只读,并启用jSignature按钮
$("#signature").jSignature("enable");
验证画布是不是被更改
$("#signature").jSignature("isModified");
我这里提取为图片格式默认 .png base64位
dataImg = $("#signature").jSignature("getData", "image");var i = new Image();i.src = "data:" + dataImg [0] + "," + dataImg [1];i.image = dataImg [1];var requestTag;requestTag = '{$Think.get.identify}';console.log(i.image);console.log(i.src);
这个地址在H5中 用 <img src="i.src"> 标签 显示图片