jQuery手写签名插件jSignature

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

 166326  447  查看评论 (70)
分享到微信朋友圈
X
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移动端自制画板

可以使用多种颜色画笔进行图画,有橡皮擦,代码注释较全容易扩展。注意请在移动端查看效果!
  丰富的输入
 28202  301

jquery屏幕键盘插件Virtual Keyboard

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

jQuery移动端车牌号码输入

jQuery移动端车牌号码输入支持新熊源车号
  丰富的输入
 19383  208

本地化jQuery公式加中文键盘

集合mathquill公式输入和中英文标点符号输入键盘,主要适配pad端
  丰富的输入
 25707  326

讨论这个项目(70)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    A♂┵起风了你还不回来麽 0
    2023/11/29 10:26:03
    样式太难调了 手写倒是流畅不卡顿 回复
    美工-朱英燕 0
    2023/7/7 11:31:12
    如何添加一个保存按钮,只输出一种格式? 回复
    zhangfan0625 0
    2021/2/6 9:04:39
    大神,画布的大小是怎么修改??
        yz8812150
        2021/7/8 16:38:28
        $("#signature").jSignature({
             'width': 1000,
             'height': 500
        })
    回复
    鱼忆。bluesky 0
    2020/12/15 9:42:09
    请问可以加自定义的水印吗 回复
    疾风知劲草 0
    2020/1/18 17:26:53
    我想设置生成的签名的笔的粗细怎么设置啊。 回复
    VVickyCHEN 0
    2019/7/25 14:25:39
    请问一下,怎么哪一种格式是保存为背景透明的?画出来渲染到页面上的图片是透明的,但是用php将base64的转保存为本地图片的时候,却变成了白色背景了。
        BattleofLexington0
        2019/7/25 14:32:28

        已经测试,导出的png格式是透明的。

    回复
    __Crazy┿各自安好 0
    2019/5/23 10:27:35
    大神,我要将签字的内容转成文字,怎么写啊 回复
    萱草忘不了忧 0
    2018/10/24 14:47:19
    这个手写板 在小米max2下 不能写,请问有人遇到类似的问题吗? 如何解决的 回复
    May0531 0
    2018/8/31 15:42:30
    问一下:怎样设定formattype。按照实例:var data = $sigdiv.jSignature('getData', 'image');得到图片的格式是image/png;我想要的图片格式是image/jpeg。怎么样设定? 回复
    老板,求红包。 0
    2018/7/20 16:12:42
    image方式生成图片,生成的大小跟画布大小一致了。如何得到数据是编辑的区域,就如svg、svgbase64方式一样,生成img效果。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复