jsignature中文开发的方法

解释：

• [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有冲突，不知道是版本问题，还是代码代码冲突









 
    .zx11{
        border: 1px;
        border-color: red;
    }
    #signatureparent {
        color:black;
        background-color:darkgrey;
    }
    #signature {
        border: 2px dotted black;

    }




    
        
    
    

    保存
    清除

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

“jsignature中文开发的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！