js常用插件(十二)之手写签名jsignature.js

web前端小龚

已于 2023-10-11 10:30:27 修改

阅读量4.3k

点赞数 2

分类专栏： js插件

于 2021-02-07 16:29:28 首次发布

本文链接：https://blog.csdn.net/qq_41560520/article/details/113743241

版权

js jquery javascript 前端经验分享

js插件专栏收录该内容

20 篇文章 0 订阅

订阅专栏

js常用插件之手写签名jsignature.js

jsignature.js

先上效果图:
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="./jsignature.js"></script>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>签名</title>
</head>

<body>
        <div id="signature"></div>
        <br>
        <button type="button" class="btn btn-primary btn-block" id="save">保存</button>
        <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
        这里是保存后图片:
        <img class="img" src="" alt="">
    <script type="text/javascript">
        var param = {
            width: '100%', //签名区域的宽
            height: '300px', //签名区域的高
            cssclass: 'zx11', //画布的类 可以写自定义的样式
            UndoButton: true, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
            signatureLine: false, //去除默认画布上那条横线
            lineWidth: '10' //画笔的大小
        };
        $("#signature").jSignature(param);

        //jSignature提供了清除的API reset
        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });

        //提交
        $('#save').click(function () {
            if ($("#signature").jSignature('getData', 'native').length === 0) {
                alert("请签名后再提交！");
                return;
            }
            //将签名的画布保存为base64编码字符串 默认是png的
            var datapair = $("#signature").jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            console.log(i.src);
            $('.img').attr('src',i.src)
        })
    </script>
</body>

</html>```