jQuery手写签名插件jSignature

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

 17849  66  查看评论 (43)
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(","))
相关插件-丰富的输入,独立的部件

EmojiOne表情符号所见即所得的文本编辑器

emojionearea.js是一款可集成EmojiOne表情符号的所见即所得的jQuery文本编辑器插件。emojionearea.js允许你将任何的HTML元素转换为WYSIWYG文本编辑器,并且它能够在编辑器中使用Emojione图标。
  丰富的输入
 7653  54

jQuery电子签名

很多APP中用到的签署协议后或消费后需使用者签字后保存图片
  丰富的输入
 7806  78

jQuery评论写入jquery.cookie.js

一个简单的评论框
  丰富的输入
 9023  64

Javascript模拟键盘事件

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

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

    r uì 0
    2018/1/31 17:59:44

    怎么获取到签名的图片有效区域呢?大神

    回复
    r uì 0
    2018/1/30 19:09:43

    画布中的横线怎么去掉呢?找不到JS啊

        r uì0
        2018/1/30 19:12:07

        我用的官方的,现在用您的吧!3Q大神

        么么哒

    回复
    百里挑一巫伟科-九星企业 0
    2017/11/29 9:26:17

    怎么检查签名的复杂度,我鼠标在上面点了个点都可以,怎么判断签名是否有效

    回复
    0
    2017/11/10 9:54:17
    签名保存后,保存的图片背景色默认是黑色的,初始化把背景色换成白色,保存的图片背景色显示还是黑色的;请问怎么把背景色换成白色或透明色
        短腿0
        2017/12/7 23:32:13

        你好,我也遇到了你这个问题,你解决了吗

        短腿0
        2017/12/7 23:34:46

        前台提取签名数据用的svg,后台用的batik转png

    回复
    杨阳-空指针 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/11/27 16:14:08

        您好,请问怎么写的高度呢

        短腿1
        2017/12/7 23:36:21

        手机端写百分比效果比较好,'height:'80%',width:'100%''

    回复
    嘟嘟宇 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里面可以去掉

        短腿1
        2017/12/7 23:37:30
        'decor-color' 设置这个属性,让横线的颜色与背景色一致
    回复
取消回复