jsignature 中文开发教程

jSignature是一个简单的插件，它能在浏览器窗口中简化签名，并且可以让用户用鼠标、笔、手指来书写签名。下面本篇文章就来给大家分享一个jsignature 中文开发教程，简单了解下jsignature插件的用法，希望对大家有所帮助！

jSignature通过笔画的矢量轮廓来捕捉签名。 jSignature 可以输出 PNG 图像，并且有极强的灵活性。

• github：https://github.com/brinley/jSignature

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

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

请注意使用过的jquery最好版本比较新，我的是jquery2.1.4，jSignature的版本是jSignature v2，因为版本越新，在h5上书写的效果越流。

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

最后还有一些技巧和个人经验

注意： 

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

file:// 和http请求的差异

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

基本使用过方法

<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=&#39;imported&#39;></img>").attr("src",sig.jSignature(&#39;getData&#39;, &#39;base30&#39;)).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：

http://brinley.github.io/jSignature/

将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本身有三个不同的代码段转换成一个最小的可部署：:

• 准备Canvas元素的代码。 它包括检测浏览器功能，最大限度地利用div的范围内的画布，在需要时使用Flashcanvas设置仿真画布。

• 处理实际签名捕获+数据导入/导出API的代码。 它附加并监听移动事件处理程序，将数据结构中的笔触数据存储起来，处理API调用。

• 插件可帮助您获取方便您的格式的签名数据，如原始数据坐标，图像，压缩的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: &#39;100%&#39;,
            height: &#39;300px&#39;,
            cssclass: &#39;zx11&#39;,
            signatureLine: false,//去除默认画布上那条横线
            lineWidth: &#39;5&#39;
        };
        $("#signature").jSignature(arguments);

        $(&#39;#clear&#39;).click(function () {
            $("#signature").jSignature("reset");
        });
        $(&#39;#save&#39;).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 = &#39;{$Think.get.identify}&#39;;
            console.log(i.image);
//            console.log(i.src);

            //询问框
            layer.confirm("如果确认无误，请确认<br><img src=" + i.src + " height=&#39;100px&#39; width=&#39;100px&#39; />", {
                btn: [&#39;确认&#39;, &#39;取消&#39;] //按钮
            }, 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(&#39;上传成功&#39;);
                        } else {
                            layer.msg(&#39;上传失败,请再次签名！&#39;);
                        }
                    }
                });
            }, function () {
                layer.msg(&#39;取消成功&#39;);
            });



        });
    });
</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));

【相关推荐：javascript学习教程、web前端】

以上是jsignature 中文开发教程的详细内容。更多信息请关注PHP中文网其他相关文章！