页面手写签名插件 jSignature.min.js 使用实例

最新推荐文章于 2024-05-30 08:49:28 发布

敲代码的大雄

最新推荐文章于 2024-05-30 08:49:28 发布

阅读量2.2k

点赞数 1

分类专栏：学习笔记插件使用文章标签： html jquery javascript

本文链接：https://blog.csdn.net/qq_34217386/article/details/118021213

版权

学习笔记同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

插件使用

4 篇文章 0 订阅

订阅专栏

页面手写签名插件 jSignature.min.js 使用实例

jSignature.min.js 插件下载

页面使用demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/style.css}">
</head>
<body>
<div class="layui-form" style="padding: 20px 20px 20px 20px;">
    <div class="page-group">
        <!-- 单个page ,第一个.page默认被展示-->
        <div class="page page-current">
            <header class="bar bar-nav bar-nav-top">
                <h1 class="title">签名</h1>
            </header>
            <nav class="bar bar-footer padding-none">
                <div class="grid-flex footer-btn-group">
                    <button type="button" class="item btn-gray" id="reSign">重签一次</button>
                    <button type="button" class="item btn-blue" data-id="submit" id="confirm-btn">保存，签名确认</button>
                </div>
            </nav>
            <div class="content">

                <div class="content-padded">
                    <div class="enroll_box_qianm">
                        <div id="signature" class="signature"></div>
                        <div class="tips">
                            请在上方输入框中进行手写签名
                        </div>
                        <div class="signature-mark" style="display:none;">
                            <table width="100%" height="100%">
                                <tr>
                                    <td valign="middle" style="font-size:90%;">如需重签请点击“重签一次”</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/static/js/jquery.min.js}"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script th:src="@{/static/js/jSignature.min.noconflict.js}"></script>
<script>
    /*
    api 命令：

    init是默认的，假定的动作。 init需要一个参数 - 一个设置对象。 您可以省略命令，并在init中传递设置对象。 返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
    reset 复位只是清除签名板，数据存储（并放回签名线和其他装饰）。 返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
    clear reset别名，历史遗留
    getData 接受参数 - 数据格式的名称。 返回适合数据格式的数据对象
    setData 需要两个参数 - 数据对象，数据格式名称。 当数据对象是以data-url模式格式化的字符串时，您不需要指定数据dormat名称。 数据格式名称（mime）将从data-url前缀中隐含。 见下面的例子。 返回（以传统的jQuery链接方式）jQuery对象引用应用插件的元素。
    importData  setData的别名 ，历史遗留
    listPlugins 接受一个参数 - 表示要列出的插件的类别（仅导出，此时支持的导入）的字符串。 返回字符串数组。
    disable 使画布只读，并禁用jSignature按钮
    enable 使画布只读，并启用jSignature按钮
    isModified 如果jSignature被修改，返回一个布尔值true，否则返回false。
    getSettings 返回jSignature实例的可配置设置。
    updateSetting 需要三个参数 - 设置名称，新值，布尔值，如果更改应该影响当前签名或将来的笔画。 这允许您更新某些设置，如lineWidth或线条颜色，使用第三个参数可以使更改适用于现有笔画。 目前，更新现有笔画的更改仅适用于像颜色这样的几个设置。 返回更新的值
    */
    (function($){
        //初始化签名插件
        $("#signature").jSignature({
            width : '100%',
            height : '100%'
        });

        //重新签名
        $("#reSign").click(function(){
            var $signArea=$("#signature");

            //使画布只读，并启用jSignature按钮
            $signArea.jSignature("enable");

            $(".signature-mark").hide();

            $('#confirm-btn').prop('disabled', false);

            //重置
            $signArea.jSignature("reset");
        });

        //确认签名
        $('#confirm-btn').click(function(){
            // 获取签名的SVG
            // jSignature("getData","svgbase64");

            // 获取签名的“base30”数据对
            var base30 =$("#signature").jSignature("getData", "base30");

            if(base30 && base30.length==2 && base30[1]==""){
                alert('请签名');

                return;
            }
            else{
                //待提交数据
                var imageData=addSign();
                $(this).prop('disabled', true);
                $(".signature-mark").show();

                var base64Src = encodeURIComponent(encodeURIComponent(imageData));
                console.log(base64Src);
                //...  业务处理
            }
        });

        //将写字板的内容添加至展示区
        function addSign(){
            var src='';
            var $signArea=$("#signature");
            var data = $signArea.jSignature("getData", "image");
            if(data && data.length > 1){
                src = "data:" + data[0] + "," + data[1];
                console.log(src);

                //使画布只读，并禁用jSignature按钮
                $signArea.jSignature("disable");
            }

            return src;
        }

    })(jQuery);

</script>

</body>
</html>

这里要注意，script 放在页面尾部，dom 加载完成再进行画布初始化。

使用效果

在这里插入图片描述

敲代码的大雄

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
页面手写签名插件 jSignature.min.js 使用实例

页面手写签名插件 jSignature.min.js 使用jSignature.min.js 插件下载页面使用案例<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
复制链接

扫一扫