jQuery手写签名插件jSignature

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

 22919  75  查看评论 (50)
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)电脑键盘效果。该苹果电脑键盘可以通过按真实键盘上的相应键来触发虚拟键盘上的键,按键被按下时有逼真的动画效果。
  丰富的输入
 9049  43

jQuery评论插件

这是一个评论插件,传入一个评论体即可,支持对留言的回复
  丰富的输入
 8773  88

jQuery答题测试(原创)

点击左右键,左右滑动可切换题目,已答题数目和总题目数,交卷
  丰富的输入
 6839  41

jQuery在线做试卷并查看答案

jQuery在线试卷,提交后查看答案、解析。题型包括 1单选2多选3判断4填空5问答8论述题6完型填空7阅读理解
  丰富的输入
 5322  30

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

    阳光下的木子林 0
    2018/4/23 11:21:04

    调用的时候发现

    canvas.ontouchstart = function(e) {}

    这个事件失效,需要刷新页面才能有效

        阳光下的木子林1
        2018/4/23 14:20:06

        将源码中883行的代码改成下面的即可解决

        canvas.addEventListener('touchstart', function(e) {
            canvas.onmousedown = canvas.onmouseup = canvas.onmousemove = undef;
            this.fatFingerCompensation = (
                settings.minFatFingerCompensation &&
                settings.lineWidth * -3 > settings.minFatFingerCompensation
            ) ? settings.lineWidth * -3 : settings.minFatFingerCompensation;
        
            drawStartHandler(e);
            canvas.addEventListener('touchend', function(e) {
                drawEndHandler(e)
            })
            canvas.addEventListener('touchstart', function(e) {
                drawStartHandler(e)
            })
            canvas.addEventListener('touchmove', function(e) {
                drawMoveHandler(e)
            })
        })
    回复
    阳光下的木子林 0
    2018/4/22 21:21:57
    为什么有时候不能签名,需要重新刷新下页面才能签名 回复
    射手座_峰 0
    2018/3/15 16:05:33
    怎么判断有没有签名呢?大神lqrole
        阳光下的木子林1
        2018/4/22 21:23:28
        $("#signature").jSignature('getData', 'native').length 判断
    回复
    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%''

        DongDavid1
        2018/3/6 10:40:04

        最终是在目标div中生成了一个canvas。
        我是这样做的,强制目标div下的canvas高度为100%

        !important;
        	html,body {
        	height:100 %;
        	width:100 %;
        }
        .container {
        	border:solid;
        	width:100 %;
        	height:80 %;
        }
        .container canvas {
        	height:100 % !important;
        }
        <div id="can" class="container"></div>
        $('#can').jsignature();
    回复
    嘟嘟宇 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();
        })
    回复
取消回复