jsignature中文开发的方法

本篇内容介绍了“jsignature中文开发的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联公司是专业的玉龙网站建设公司，玉龙接单;提供网站设计制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行玉龙网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

注意：
本插件最新版是支持IE8的，测试请放在本地服务器上测试，不要直接打开，因为一些js的文件请求协议不支持windows本地文件协议
file:// 和http请求的差异
如果不清楚是怎么请求协议的差异，请不要纠结，直接上本地服务器测试

基本使用过方法

$(document).ready(function() { $("#signature").jSignature(); });

如果只是在html5这样引用了

需要浏览器使用

$(document).ready(function() { $("#signature").jSignature(); });

这个兼容性问题解决

方法：

方法名称	使用方法	说明
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来做，可以使用类似的东西

$("").attr("src",sig.jSignature('getData', 'base30')).appendTo(sig);

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

" />

您还可以将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的支持），将其添加到您的页面：

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(","))

//jquery.moblie会和jsignature有冲突，不知道是版本问题，还是代码代码冲突 .zx11{ border: 1px; border-color: red; } #signatureparent { color:black; background-color:darkgrey; } #signature { border: 2px dotted black; }

保存清除

$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中文开发的方法

其他资讯