jQuery手写签名插件jSignature

所属分类:输入,其他-丰富的输入,独立的部件

 4149  32  查看评论 (9)
jQuery手写签名插件jSignature ie兼容9

jSignature 详细介绍

jSignature是一个jQuery插件,它简化了创建签名捕获场的浏览器窗口,允许用户使用鼠标,笔,或手指画一个签名。jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图(PNG)也一样,提取签名的高度可扩展的行程运动坐标(又名向量图)允许签名呈现更大的灵活性。支持主要的台式机,平板电脑和手机浏览器的支持。HTML5 Canvas元素默认情况下使用。我们依傍基于Flash的Canvas元素模拟器(FlashCanvas)时,不支持浏览器的实际画布(ie8 以下)。

基本调用方式

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

API

  • init:初始化

  • reset:复位/重置

  • getData:获取数据

  • setData:设置 数据

  • listPlugins:导入导出列表

var $sigdiv = $("#signature")
$sigdiv.jSignature() //// inits的jSignature部件。
//一些涂鸦后......
$sigdiv.jSignature("reset") //清除画布并重新渲染的装饰就可以了
// 获取签名的SVG和呈现在浏览器中的SVG. 
//此导出插件返回数组[MIMETYPE,签名的SVG的base64编码字符串划]
var datapair = $sigdiv.jSignature("getData", "svgbase64") 
var i = new Image()
i.src = "data:" + datapair[0] + "," + datapair[1] 
$(i).appendTo($("#someelement") // 添加图像(SVG),到 DOM
// 获取签名的“base30”数据对
datapair = $sigdiv.jSignature("getData","base30") 
//重新导入数据到jSignature。
$sigdiv.jSignature("setData", "data:" + datapair.join(","))
相关插件-丰富的输入,独立的部件

纯CSS3打造逼真的苹果(Apple)电脑键盘

这是一款使用纯CSS3制作的效果非常逼真的苹果(Apple)电脑键盘效果。该苹果电脑键盘可以通过按真实键盘上的相应键来触发虚拟键盘上的键,按键被按下时有逼真的动画效果。
  丰富的输入
 6727  35

Javascript模拟键盘事件

Javascript模拟键盘事件 可对应键盘每一个键
  丰富的输入
 3943  29

jQuery移动端自制画板

可以使用多种颜色画笔进行图画,有橡皮擦,代码注释较全容易扩展。注意请在移动端查看效果!
  丰富的输入
 3464  15

CSS3和js超酷iPhone样式科学计算器插件

CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片,纯CSS制作。该计算器是科学型的,可以处理乘方、开方、指数、对数等复杂的数学运算。
  丰富的输入
 3323  14

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    翟骏------ 0
    2017/6/26 16:45:27

    我下载直接用,还是不兼容ie8呢

        翟骏------0
        2017/6/26 16:47:06

        在网上用案例的话怎么就支持ie8呢

         

    回复
    microcross 0
    2017/6/2 14:45:31

    我把这个插件放在一个按钮触发的弹窗里,光标在小窗口里划的时候就没有笔迹了,但是只要改变一下窗口大小(或者浏览器大小动一下)就能出现笔迹了,请问这个该怎么解决??谢谢大神,求帮助啊~

        microcross0
        2017/6/2 15:07:31

        刚发现和楼上是相同的问题,由于画布缩小后,光标和笔迹不在一起,所以才看不到,调整大小后可以了

    回复
    0
    2017/5/12 17:57:44

    在手机端 画布的大小会根据屏幕的宽度自适应,显得特别小应该在哪里修改高度呢,js是压缩的,代码好难找

        lqrole0
        2017/5/12 18:01:11
        var sigdiv = $("#signature");
        sigdiv.jSignature('init',{height:'250px',width:'100%'});
        0
        2017/5/15 17:16:25
        调大之后,写字的时候文字和笔不在一起 失真了
    回复
    SiriBen 0
    2017/5/1 15:29:11

    感觉挺不错的,不过目前不知道应用在什么地方啊

        lqrole0
        2017/5/5 19:02:00

        手写签名 手机H5可以使用

    回复
取消回复