jQuery手写签名插件jSignature

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

 11480  53  查看评论 (34)
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 QQ表情插件jquery.qqFace.js

一款基于jQuery的QQ表情特效插件
  丰富的输入
 99369  216

Simditor 富文本编辑器

Simditor 是团队协作工具 Tower 使用的富文本编辑器。功能精简,加载快速。
  丰富的输入
 125328  151

超炫联系方式表单美化插件

这是一款效果非常精美炫酷的jQuery和CSS3联系方式表单美化插件。大多数网站上都有让用户填写的联系方式表单,一个设计良好的表单能够大大的提升用户的体验度。该表单美化插件在原生HTML表单的基础上进行加工,并使用jQuery来制作label动画,使表单样式更加大方得体。
  丰富的输入
 4287  31

jQuery带表情的评论框

jQuery带表情的评论框,可自己随意添加表情框,简单方便
  丰富的输入
 2152  10

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

    0
    2017/11/10 9:54:17
    签名保存后,保存的图片背景色默认是黑色的,初始化把背景色换成白色,保存的图片背景色显示还是黑色的;请问怎么把背景色换成白色或透明色 回复
    杨阳-空指针 0
    2017/11/8 17:24:18

    移动端没有效果呢?

    回复
    安静? 0
    2017/10/23 13:44:09

    怎么改变签名的高度。。自动生成的canvas的高度

        安静?0
        2017/10/23 13:45:12

        求解啊,我放手机上画布高度太小

        安静?0
        2017/10/23 14:26:25

        解决了,希望api 参数配置能写完整

    回复
    嘟嘟宇 0
    2017/10/17 16:31:15

    引了js,为什么不能写字呢?

    <script src="js/app/jSignature.min.js"></script>
    <script src="js/app/jquery-1.10.2.min.js"></script>
    <div id="mySignature_debacklist" style="text-align: right;padding-left: 20px;padding-right: 10px;border: 2px dotted black;background-color:lightgrey;"></div>
    var $sigdiv = $("#mySignature_debacklist").jSignature();

    哪写的有问题么???求大神帮忙

        lqrole0
        2017/10/17 16:36:50
        <script>    
        $(document).ready(function() {
            //能放到页面初始化加载后的事件里面么?代码放这里    
        }) 
        < /script>
        嘟嘟宇0
        2017/10/17 16:40:56

        我写在了一个页面articleload里

        $("#deviceTakeback").on("articleload","#de_back_list_article",function(){
          var $sigdiv = $("#mySignature_debacklist").jSignature();
        })
    回复
    Duo 0
    2017/9/27 13:54:08

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

        lqrole0
        2017/10/17 16:37:40

        浏览器、手机下都可以的 你引用的方式不对吧! 你就用案例试试

    回复
    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();
        lqrole0
        2017/10/17 16:38:53

        横屏竖屏 都要初始化的哦! 

    回复
    我们都一样9520 0
    2017/8/25 14:07:18

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

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

        怎么去掉?

        lqrole0
        2017/10/17 16:39:26

        在他的JS里面可以去掉

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

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

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

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

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