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为zx
            color:'#000000',    //画板笔颜色
};

方法：

方法名称	使用方法	说明
clear	.jSignature("clear")	清空并重置画布
getData	.jSignature("getData", "base30")	将画布转换为base64编码的数据字符串，可以在表单发布或提交时将其保存为任何数据库中的字符串
importData	.jSignature("importData",dataurl)	使用从上述getData方法提取的数据URL更新现有的jSignature画布

参数解释：

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

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