• jSignature手写签名的实现


    jSignature.js是实现手写签名的插件,由于jSignature.js是基于jQuery的,所以使用时需要先引入jQuery切记!!!

    具体使用方法如下:

    第一步,下载jSignature.js,从哪下载呢?https://github.com/brinley/jSignature  感谢GitHub

    第二步,引入jQuery 和 jSignature.js

    第三步,生成html结构

       <div id="signature" style="height: 100%;"></div>
        <button type="button" onclick="jSignatureTest()">生成签名</button>
        <button type="button" onclick="reset()">重置签名</button>
        <div id="image" style="margin:20px"></div>

    第四步,初始化jSignature,具体怎么初始化呢?往下看

    $(function(){
       //初始化插件
       $("#signature").jSignature();
    })

    就可以啦!

    第五步,点击生成签名,导出图片,重置jSignature

    //输出签名图片
            function jSignatureTest(){
                var $sigdiv = $("#signature");
                var datapair = $sigdiv.jSignature("getData", "svgbase64")
                console.log(datapair);
    //          datapair = ["image/svg+xml;base64","PD94bWwgdmVyc2lvbj0iMS4wIi
    //          BlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2Zy
    //          BQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My
    //          5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPS
    //          JodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD
    //          0iMzEiIGhlaWdodD0iMzQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMD
    //          AwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm
    //          9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMSAxIGMgMC4xMiAwLjExIDUuMDEgMy
    //          43NiA3IDYgYyAzLjI1IDMuNjUgNS43MSA4LjM1IDkgMTIgYyAyLjY0IDIuOTMgNi
    //          4zNyA1LjE2IDkgOCBjIDEuNTggMS43IDQgNiA0IDYiLz48L3N2Zz4="]
                var img = new Image();
                img.src = "data:" + datapair[0] + "," + datapair[1]
                $(img).appendTo($("#image"))
            }
    
            function reset(){
                var $sigdiv = $("#signature");
                $sigdiv.jSignature("reset");
            }

    到这里就结束啦!

    最后奉上jSignature的一些方法:

    • init是默认的假定操作。init接受一个参数-设置对象。您可以省略该命令,而只是在初始化时将设置对象传递给它。返回(以传统的jQuery可链接方式)jQuery对象ref到应用插件的元素。
    • reset只需清除签名板,数据存储(并放回签名线和其他装饰)即可。返回(以传统的jQuery可链接方式)jQuery对象ref到应用插件的元素。
    • clear 重设别名(用于旧版目的)。
    • destroy 销毁实例。
    • getData接受一个参数-数据格式的名称。返回适合该数据格式的数据对象。
    • setData接受两个参数-数据对象,数据格式名称。如果数据对象是以数据URL模式格式化的字符串,则无需指定数据Dormat名称。数据格式名称(MIME)将在data-url前缀中隐含。参见下面的示例。返回(以传统的jQuery可链接方式)jQuery对象ref到应用插件的元素。
    • importData setData的别名,用于传统用途。
    • listPlugins需要一个参数-一个字符串,表示该类别(只exportimport插件列出的在这个时候支持)。返回字符串数组。
    • disable 使画布为只读并禁用jSignature按钮
    • enable 使画布为只读并启用jSignature按钮
    • isModified 如果修改了jSignature,则返回布尔值true,否则返回false。
    • getSettings 返回jSignature实例的可配置设置。
    • updateSetting接受三个参数-设置名称,新值,布尔值(如果更改应影响当前签名或将来的笔划)。这使您可以更新某些设置,如lineWidth或line color,并使用第三个参数可以将更改应用于现有笔触。目前,更新对现有笔划的更改仅适用于一些设置,例如颜色。返回更新的值。

    如有侵权,请联系作者删除!谢谢!

  • 相关阅读:
    关于视图的一些认识
    __autoload()尝试加载未定义的类
    php正则逆向引用与子模式分析
    常州day1p4
    Hello World
    Linux安装配置jdk
    使用http3访问服务
    后端访问sso后,如何返回前端vue页面(后端redirect跳转,vue代理,axios带参)
    linux常用命令
    使用nexus搭建npm私服
  • 原文地址:https://www.cnblogs.com/weblxlx/p/11792059.html
Copyright © 2020-2023  润新知