jQuery手写签名插件jSignature

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

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(","))
相关插件-丰富的输入,独立的部件

jquery标记编辑器插件Tag Editor

Tag Editor是一个功能强大的和轻量级jQuery标记编辑器插件。
  丰富的输入
 19755  60

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

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

支持移动端的HTML5 Canvas逼真黑板特效

这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动端,它能模拟使用粉笔在黑板上写字的效果。
  丰富的输入
 8653  99

实现打字机效果

封装好的方法实现打字机效果兼容ie6
  丰富的输入
 3895  48

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

    630705835 0
    2017/9/5 9:52:45

    为啥每次移动端屏幕横屏竖屏切换都会加载一个全新的啊。

    $("#signature").width($ {
        width
    }).height($ {
        height
    });
    if (navigator.userAgent.match(/Android/i) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
    
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
            if (window.orientation === 180 || window.orientation === 0) {
                //$sigdiv.jSignature("reset"); 
                $sigdiv.jSignature({
                    width: "100%",
                    height: "100%"
                });
                $(".jSignatureBody").css("height", "50rem");
                alert("竖屏");
            }
            if (window.orientation === 90 || window.orientation === -90) {
                //$sigdiv.jSignature("reset"); 
                $sigdiv.jSignature({
                    width: "100%",
                    height: "65%"
                });
                $(".jSignatureBody").css("height", "35rem");
                $(".jSignature").css("margin-top", "5rem!important");
                $("center").css("background-size", "66rem 110%");
                alert("横屏");
            }
        }, true)
    } else {
        $sigdiv.jSignature({
            width: "100%",
            height: "100%"
        });
    }
    /* $sigdiv.jSignature({width:"100%",height:"100%"}); */
    var a = $sigdiv.jSignature("getData", "image").toString();
    回复
    我们都一样9520 0
    2017/8/25 14:07:18

    为什么我的画布上有个横线??

        我们都一样95200
        2017/8/25 14:09:08

        怎么去掉?

    回复
    越努力 0
    2017/8/24 8:53:05

    请问一下,怎么判断没有签名就保存了啊?

    回复
    最初的梦想 0
    2017/8/15 16:38:46

    我想改变canvas画布的宽度,应该在哪里改呢?我想改canvas的样式

    回复
    十一浪 0
    2017/7/26 14:23:41
    移动端没效果,手指划不了,是还有什么参数吗? 回复
    null 0
    2017/7/25 15:06:17

    在页面加入一个弹窗,将画布放在弹窗里,获取不到改画布的图片,请问怎么设置,谢谢

        null0
        2017/7/26 11:33:02

        已解决

        十一浪0
        2017/7/26 14:25:56

        请问移动端是怎么配置参数的?我在移动端手指划了没效果

        null0
        2017/7/27 16:02:25
        设置画布的宽高: $sigdiv.jSignature('init',{height:100,width:bw-130});
        最初的梦想0
        2017/8/16 9:21:32

        请问效果实现了吗?可以交流一下在移动端遇到的一些问题吗?谢谢大神

    回复
    翟骏------ 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
        调大之后,写字的时候文字和笔不在一起 失真了
        最初的梦想0
        2017/8/16 9:19:27

        请问问题解决了吗

    回复
    SiriBen 0
    2017/5/1 15:29:11

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

        lqrole0
        2017/5/5 19:02:00

        手写签名 手机H5可以使用

        古月坛0
        2017/8/18 16:32:19

        想问,为什么我chrome的手机模式下,画不出来字迹呢?

    回复
取消回复