jSignature是一款兼容手机移动端的手写插件-BFW插件库

jSignature是一款兼容手机移动端的手写插件

jSignature是一款兼容手机移动端的手写插件，允许用户使用鼠标，笔，或手指画一个签名。

jSignature捕捉签名矢量轮廓的笔触并支持导出多种格式。

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件

use(["jSignature.min"], function() {});

第三步配置参数

$("#obj").Signature({height:300,lineWidth:4});

方法介绍：

init：初始化

reset：复位/重置

getData:获取数据

setData:设置数据

listPlugins:导入导出列表

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            var $sigdiv = null;
            use(["jSignature.min"], function() {
                $sigdiv = $("#signature");
                $sigdiv.jSignature({height:300,lineWidth:4}); //// inits的jSignature部件。
                //一些涂鸦后......



            });

            $("#clearsign").click(function() {
                $sigdiv.jSignature("reset"); //清除画布并重新渲染的装饰就可以了
            });
            $("#getsign").click(function() {
                // 获取签名的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(","));
            });
        });
    </script>
    <style>
       
      
    </style>
</head>
<body>
    <div id="signature">

    </div>
    <button id="getsign">获取数据</button>    <button id="clearsign">清空画布</button>
    <div id="someelement"></div>
</body>
</html>

jSignature是一款兼容手机移动端的手写插件

网友评论0

vconsole.js

ntc.js

classie.js

jquery.wheelOfFortune.js

guagua.js

qrcode.js

tracking-min.js

Scratch.js

crossroads.js

jscapture.js