jsignature 中文开发手册

时间  2019-11-08
标签 jsignature 中文 开发 手册 繁體版
原文   原文链接

2017年5月9日21:23:17，最近比较忙，没时间写博客，真的是愈来愈懒来了javascript

github：https://github.com/brinley/jSignaturephp

http://www.unbolt.net/jSignature/ 一部分英文文档css

文章最后会带一个完整的数字签名的demo，后台处理php的版本，仍是请看最下面的qq群号，进入下载，想更多人一块儿交流，少走点弯路html

请注意使用过的jquery最好版本比较新，个人是jquery2.1.4，jSignature的版本是jSignature v2，由于版本越新，在h5上书写的效果越流html5

 

请注意这个文档是根据旧版本翻译加上一些我的经验修复的java

最后还有一些技巧和我的经验jquery

 

注意： git

本插件最新版是支持IE8的，测试请放在本地服务器上测试，不要直接打开，由于一些js的文件请求协议不支持windows本地文件协议github

file:// 和http请求的差别ajax

若是不清楚是怎么请求协议的差别，请不要纠结，直接上本地服务器测试

 

 

基本使用过方法

 <div id="signature"></div>
<script type="text/javascript" src="jquery.js"></script> 

<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature();
 });
 </script>

若是只是在html5这样引用了

须要浏览器使用

 <div id="signature"></div>
<script type="text/javascript" src="jquery.js"></script> 
<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>
   <!--[if lt IE 9]>
        <script type="text/javascript" src="flashcanvas.js"></script>
        <![endif]--> 
 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature();
 });
 </script>

 这个兼容性问题解决

 

方法：

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

 

 选项参数：

 

参数名称 说明 默认值
width 定义画布的宽度。 没有％或px的数值（新版是可使用百分比和px后缀的） 250
height 定义画布的高度。 没有％或px的数值（新版是可使用百分比和px后缀的） 150
color 定义画布上笔画的颜色。 接受任何颜色十六进制值 #000
background-color 定义画布的背景颜色。 接受任何颜色十六进制值 #fff
lineWidth 定义线的厚度。 接受任何正数值（也是默认画布的横线的画笔的宽度） 1
cssclass 定义画布的自定义css类 None

 

导入图像数据

画布图像导入并保存到数据库后，能够经过其base64编码的字符串轻松显示图像，

要经过jQuery来作，可使用相似的东西

$("<img class='imported'></img>").attr("src",sig.jSignature('getData', 'base30')).appendTo(sig);

或者直接从服务器端输入数据串到img的的src属性中

<img src="<? echo $datastring ?>" />

您还能够将dataUrl导入到jSignature画布中，以便您能够经过如下JavaScript代码编辑签名

$("#signature").jSignature("importData",dataurl);

dataurl是上面使用的相同的数据串。 您能够在下面的演示中经过从其中一个jSignature复制数据字符串，而后单击另外一个jSignaure的“导入数据到画布”，

并将数据字符串粘贴到出现的对话框中，从而在下面的演示中看到它 

 

giehub官方版本部分

jSignature是一个jQuery插件，它简化了浏览器窗口中签名捕获字段的建立，容许用户使用鼠标，笔或手指绘制签名。

j签名将签名做为笔画的向量轮廓捕获。 虽然jSignature也能够导出伟大的位图（PNG），提取签名的高度可扩展的行程移动坐标（也称为矢量图像）容许更大的灵活性

进行额外的努力（经过平滑和压力模拟），使得笔画在屏幕上看起来很漂亮，而这些画面由阁下绘制。

全部主要的桌面，平板电脑和手机浏览器的支持。默认状况下使用HTML5画布元素。咱们依靠基于canvas元素模拟器Flash（flashcanvas）当实际帆布不支持的浏览器（Internet Explorer 8节下）。

实时jsignature呈现只有装置适当的“漂亮的”逼近咱们捕获。捕获的数据老是相同的-咱们尽量捕捉尽量多的运动坐标。笔触的绘制不一样于浏览器的功能，设备的效率，屏幕大小。

捕获的签名的屏幕表示的这种降级和加强是为了确保渲染不会影响捕获的响应性而进行的。 例如，在缓慢渲染设备（Android浏览器，基于FlashCanvas的Canvas仿真）上，平滑被踢出了一个缺口，以补偿捕获的笔画坐标中的巨大差距 - 捕获设备效率低下的结果。 在全部状况下，客户都会对图纸的反应和美观感到高兴。

jSignature能够轻松地将其本身调入现有样式的网站。 jSignature自动检测包装元素上使用的颜色（文字颜色=笔颜色，背景=背景），并自动选择“装饰”（签名行）的使人愉快的中间色调。 jSignature适用于固定和可变宽度的网页设计，以及各类大小的屏幕（手机，平板电脑，电脑屏幕），而且当父元素更改大小时自动从新绘制绘图区域和签名。

 demos here

将jSignature添加到您的页面

查看源代码树中的libs文件夹。 从那里挑选3个文件：

1.jSignature.min*.js (“*”表示您有选择。 您能够选择常规的以jQuery为中心的构建或特殊的jQuery.NoConflict构建)

2.flashcanvas.js

3.flashcanvas.swf

jSignature取决于（至少最新版）jQuery

若是您不打算支持IE 7和8，则不须要下载FlashCanvas文件。

请注意，FlashCanvas是两个文件的连贯一组，分别是flashcanvas.swf和flashcanvas.js，这两个文件必须位于同一个文件夹中。 不要将它们从单独的文件夹托管，由于flashcanvas.js在与其提供的同一文件夹中查找flashcanvas.swf。 不要将flashcanvas.js重命名为其余任何东西，由于它在DOM中经过该名称查找本身，以找出从哪里加载flashcanvas.swf。

jSignature自己有三个不一样的代码段转换成一个最小的可部署：:

  1. 准备Canvas元素的代码。 它包括检测浏览器功能，最大限度地利用div的范围内的画布，在须要时使用Flashcanvas设置仿真画布。
  2. 处理实际签名捕获+数据导入/导出API的代码。 它附加并监听移动事件处理程序，将数据结构中的笔触数据存储起来，处理API调用。
  3. 插件可帮助您获取方便您的格式的签名数据，如原始数据坐标，图像，压缩的url兼容字符串，SVG。

若是您肯定受众受限于特定的浏览器引擎（您能够经过嵌入式浏览器小部件部署，使用相似PhoneGap的部件），您能够卷起袖子并将其放在第1部分。 若是你知道你只须要一个导出/导入插件，那么从最小化的可部署中删除你不须要的插件。

更多自定义数据导出/导入插件能够单独加载，而无需从新设置主要部署。 可是，缩小是有趣和容易的。 只需看看wscript.py文件，并更改几行以包含/排除某些部分。

对于“通用”部署场景（包括旧IE的支持），将其添加到您的页面：

<!-- this, preferably, goes inside head element: -->
<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/flashcanvas.js"></script>
<![endif]-->

<div id="signature"></div>

<!-- you load jquery somewhere before jSignature ... -->
<script src="path/to/jSignature.min.js"></script>
<script>
    $(document).ready(function() {
        $("#signature").jSignature()
    })
</script>

解释:

  • [if lt IE 9]部分加载IE小于9的Flashcanvas库（仅在IE上支持Flashcanvas，因此没有任何意义进行功能检测。）
  • 咱们标记一个div，其中将建立canvas元素。 任何ID或其余jQuery选择器均可以。
  • 咱们加载jSignature插件。
  • 最后，脚本调用指定DIV中的签名小部件。

API

如下方法暴露在jQuery对象之上：.jSignature（String command，* args）

参数因命令而异。 当提供命令时，命令将是一个带有jSignature命令的字符串。 目前支持的命令：

  • init是默认的，假定的动做。 init须要一个参数 - 一个设置对象。 您能够省略命令，并在init中传递设置对象。 返回（以传统的jQuery连接方式）jQuery对象引用应用插件的元素。
  • reset 复位只是清除签名板，数据存储（并放回签名线和其余装饰）。 返回（以传统的jQuery连接方式）jQuery对象引用应用插件的元素。
  • clear 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或线条颜色，使用第三个参数可使更改适用于现有笔画。 目前，更新现有笔画的更改仅适用于像颜色这样的几个设置。 返回更新的值

使用实例:

var $sigdiv = $("#signature")
$sigdiv.jSignature() //初始化 jSignature 插件
// after some doodling...
$sigdiv.jSignature("reset") // 清除画布并在其上从新装饰。
// 将签名做为SVG并在浏览器中呈现SVG。
// （!!!来自IMG元素的内联SVG渲染在全部浏览器中都不起做用!!!）
//这个导出插件返回一个数组[mimetype，base64编码的SVG的字符串的签名笔画]
var datapair = $sigdiv.jSignature("getData", "svgbase64") 
var i = new Image()
i.src = "data:" + datapair[0] + "," + datapair[1] 
$(i).appendTo($("#someelement")) // append the image (SVG) to DOM.

// 获取签名为“base30”数据对
// 数组[mimetype，jSignature的自定义Base30压缩格式的字符串]
datapair = $sigdiv.jSignature("getData","base30") 
// 将数据从新导入jSignature。
// 导入插件了解数据网址格式的字符串，如“data：mime; encoding，data”
$sigdiv.jSignature("setData", "data:" + datapair.join(","))

 

数据导入/导出（和插件）

如下插件（数据格式）是主线j签名的一部分，可分发：

  • default （仅限EXPORT ONLY）（BITMAP）数据格式与输出格式j兼容，在早期版本中生成的getData被调用时不带参数。 默认状况下，默认状况下（默认状况下）调用$ obj.jSignature（“getData”）数据格式是Canvas - data-url格式化的base64编码（可能的PNG）位图数据，以下所示 ：data：image / png; base64，i1234lkj123; k4; l1j34l1kj3j ...此导出调用返回单个数据网址格式的字符串。
  • native （导出和导入）（VECTOR）（VECTOR）数据格式是绘制笔画的自定义表示形式，做为具备道具.x，.y的对象数组，每一个对象都是一个数组。这个JavaScript对象结构是每一个绘图笔画存储在jSignature中的实际数据结构。该结构专门用于收集笔触数据点的速度和效率。 （尽管它有一些反直觉，章鱼式的结构，它（a）容许快速堆积双轴坐标，而不须要为每一个数据点建立Point对象，（b）提供很是简单的循环，基于数据的处理）。虽然您能够JSONify，它传递，解析，今后渲染，它可能不是最有效的方式来存储数据，由于内部格式可能会改变其余主要版本的jSignature。我建议将base30格式视为直接的，但紧凑的等同于“native”-as-JSON。这个数据适用于运行统计信息（尺寸，画布上的签名位置）和编辑笔画（例如容许“撤消最后一个笔画”）。
  • base30 （别名image / jSignature; base30）（EXPORT AND IMPORT）（VECTOR）（VECTOR）（VECTOR）（VECTOR）（VECTOR）（VECTOR）数据格式是一种基于Base64的压缩格式，用于荒谬的紧凑性和本机url兼容性。 它是压缩成全部向量的紧凑字符串表示形式的“本机”数据结构。 extras文件夹中提供了将此格式解压缩为可呈现格式（SVG，语言本机坐标数组）的代码示例（.Net，PHP，Ruby）。 将数据传送到服务器的一种可能的方法是JSONP，其具备不超过2000个字符的实际URL长度限制（由IE强加）。 这种压缩格式是本地URL兼容的，无需从新编码，但适合大多数非复杂签名的2000个字符。
  • svg （别名image / svg + xml）（仅EXPORT ONLY）（VECTOR）（VECTOR）数据格式生成SVG图像（SVG XML文本）的签名。 全部笔画都被去噪和平滑。 这种格式是“易于查看”和“高度可扩展”之间的良好媒介。 目前大多数浏览器都支持查看SVG，可是，这种格式能够无限缩放和加强打印。 数据是文本，容易存储和传输。 对jSignature（“getData”，“svg”）的调用返回一个数组，形式为“”image / svg + xml“，”svg xml here“]。
  • svgbase64 （别名image / svg + xml; base64）（仅限EXPORT ONLY）（VECTOR）与“svg”插件相同，但使用base64编码压缩SVG XML文本。 虽然如今有许多浏览器已经内置了base64编码器（btoa（）），但有些则像Internet Explorer那样没有。 该插件具备本身的（短而高效）的基于软件的base64编码器的副本，该编码器在缺乏btoa（）的浏览器上被调用。 对jSignature（“getData”，“svgbase64”）的调用返回一个[“image / svg + xml; base64”，“base64编码的svg xml这里”）的数组。 这个双组件数组很容易变成data-url格式的字符串（“data：”+ data.join（“，”）），或者转换成args，并做为表单值传递给服务器。
  • image （EXPORT ONLY）（BITMAP）数据格式与上面的“默认”数据格式基本相同，可是被解析，以便mimetype和数据是相似于“svg”导出产生的数组结构中的单独对象。 示例（缩短）[“image / png; base64”，“i123i412i341jijalsdfjijl234123i ...”]。 由于图像导出过滤器取决于（有点薄片）的浏览器支持而且拾取没必要要的数据，建议仅将其用于演示和开发。

选择导出/存储格式

我知道你是想从jSignature想要“图像”，可是，请控制本身，并远离。 相反，考虑在后期制做服务器端捕获“base30”或“svg”数据并加强+渲染。

若是您导出“位图”，图像将保留实际的绘图颜色，大小，缺陷，而且最重要的是可能没法在全部浏览器上运行。

  • 装饰（签名线）将在图像上。 若是jSignature被设计为深色背景+光笔颜色，那么您将在图像上得到什么 - 深色背景，覆盖灰色签名线的轻图纸。 这张图片在打印时几乎没有用。 若是您的背景与笔的强度相同（例如，蓝色为红色），则这种状况会更糟，在这种状况下，当黑白打印时，图像只是一个深灰色的矩形。 若是您更改页面颜色，捕获的图像如今开始穿上这些颜色。
  • Android 1.6 -2.2（2.3？）不支持canvas.toDataURL方法 - 位图导出功能。
  • 小屏幕（手机）产生微小的丑陋的位图。
  • 画布导出的位图与向量相比尺寸为GARGANTUAN，由于它保留了全部中间阴影和背景像素。

若是你想强制本身只能使用白色签名捕获网页风格之上的黑色，请使用位图导出。 若是你想让你的数据库管理员尖叫，由于全部位图数据的数据库的备份须要一天以上，请使用位图导出。 若是您但愿您的销售/业务部门尖叫您，由于您的签名捕获格式没法轻松集成到新的精心设计的wizbang产品/服务中，请使用位图导出。 若是您想解释为何选择的siganture格式导出不适用于全部目标平台，请使用位图导出。 若是你想如今采起简单的路线，并使IT人员在您被解雇以后进入，将ImageMagic智能卡应用于您决定收集的彩色像素混乱上的困难任务，请使用位图导出格式。

若是使用捕获的签名与“业务”或“打印”或“多个演示场所”有任何关系，则使用“base30”或“svg”数据等矢量格式，并在后期制做中加强+渲染。 “extras”文件夹中能够找到解压缩和样本，基本的渲染代码（.Net，截至2012年2月的PHP）。 您将使用这些为核心，为您本身的渲染逻辑提供可循环的坐标数据数组。

Events（事件）

jSignature初始化的dom元素在笔画完成后当即发出“change”事件，并将其添加到存储器中。 （换句话说，当用户完成绘制每一个笔画时，若是用户绘制3笔画，则每次笔画完成后，此事件将发出3次）。

如下是您如何绑定到该事件：

$("#signature").bind('change', function(e){ /* 'e.target' will refer to div with "#signature" */ })

事件经过“线程”（setTimeout（...，3））异步发出，所以您不须要将事件处理程序包装到任何类型的“线程”中，由于jSignature小部件将继续执行，而且不会等待 你要完成你的自定义事件处理程序逻辑。

 

我的经验和一个完整的php版本demo

 

html部分

  //jquery.moblie会和jsignature有冲突，不知道是版本问题，仍是代码代码冲突
<script src="__PUBLIC__/hplus/js/jquery.min.js"></script>
<script src="__PUBLIC__/sign/jSignature.min.js"></script>
<script src="__PUBLIC__/hplus/js/plugins/pace/pace.min.js"></script>
<!--<script src="__PUBLIC__/hplus/js/bootstrap.min.js?v=3.3.6"></script>-->
<link href="__PUBLIC__/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<script src="__PUBLIC__/hplus/js/plugins/layer/layer.min.js"></script>



<style type="text/css"> 
    .zx11{
        border: 1px;
        border-color: red;
    }
    #signatureparent {
        color:black;
        background-color:darkgrey;
    }
    #signature {
        border: 2px dotted black;

    }

</style>

<div class="container">
    <div id="signatureparent">
        <div id="signature"></div>
    </div>
    <br>
    <button type="button" class="btn btn-primary btn-block" id="save">保存</button>
    <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
</div>

<script>
    $(document).ready(function () {

        var arguments = {
            width: '100%',
            height: '300px',
            cssclass: 'zx11',
            signatureLine: false,//去除默认画布上那条横线
            lineWidth: '5'
        };
        $("#signature").jSignature(arguments);

        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });
        $('#save').click(function () {
            //标准格式可是base64会被tp框架过滤，所不校验，可是jSignature默认是使用png
            var datapair = $("#signature").jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            i.image = datapair[1];
            var requestTag;
            requestTag = '{$Think.get.identify}';
            console.log(i.image);
//            console.log(i.src);

            //询问框
            layer.confirm("若是确认无误，请确认<br><img src=" + i.src + " height='100px' width='100px' />", {
                btn: ['确认', '取消'] //按钮
            }, function () {


                $.ajax({
                    url: "/app.php?m={$Think.MODULE_NAME}&a={$Think.ACTION_NAME}",
                    //dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: "{\"identify\":\"" + requestTag + "\",\"image_data\":\"" + encodeURIComponent(i.image) + "\"}",//避免base64长度过大，json传输
                    type: "post",
                    cache: false,
                    success: function (msg) {
                        if (msg.code === 1) {
                            layer.msg('上传成功');
                        } else {
                            layer.msg('上传失败,请再次签名！');
                        }
                    }
                });
            }, function () {
                layer.msg('取消成功');
            });



        });
    });
</script>

 

 

php部分

$image_data = json_decode(file_get_contents('php://input'), true); //只能这样接收
$data = rawurldecode($image_data['image_data']);

            $file_name = time().'.png'; //必须png
            $a = file_put_contents($file_name, base64_decode($data));

 demo下载请去qq群下载，后面会上传到群文件

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程