600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > jsignature插件实操 完成手写签名图片格式功能

jsignature插件实操 完成手写签名图片格式功能

时间:2020-01-01 05:15:33

相关推荐

jsignature插件实操 完成手写签名图片格式功能

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对象引用应用插件的元素。

learreset别名,历史遗留

getData接受参数 - 数据格式的名称。 返回适合数据格式的数据对象

setData需要两个参数 - 数据对象,数据格式名称。 当数据对象是以data-url模式格式化的字符串时,您不需要指定数据dormat名称。 数据格式名称(mime)将从data-url前缀中隐含。 见下面的例子。 返回(以传统的jQuery链接方式)jQuery对象引用应用插件的元素。

importDatasetData的别名,历史遗留

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"> 标签 显示图片

有需要手写签名的朋友可以参考使用 ,原理大家参考开发者手册,点个赞不用谢

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。