jQuery手写签名插件jSignature

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

 28002  80  查看评论 (51)
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评论写入jquery.cookie.js

一个简单的评论框
  丰富的输入
 10507  67

实现打字机效果

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

jquery屏幕键盘插件Virtual Keyboard

一个在浏览器的jQuery屏幕键盘(OSK)插件,。
  丰富的输入
 10892  52

仿多说留言、评论框,带微博表情。

仿多说留言、评论框,带微博表情。
  丰富的输入
 24257  263

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

    笛儿 0
    2018/5/29 13:50:31
    请问一下 如何保存它生成的图片呢?谢谢~~ 有点急@lqrole 希望被翻牌 回复
    阳光下的木子林 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();
    回复
取消回复