首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript电子签名

基于JavaScript实现电子签名功能

2022-11-03 15:08:57 作者：huaweichenai

这篇文章主要为大家详细介绍了如何通过JavaScript实现简单的电子签名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

一：elesigncode拓展包下载

1：github地址：https://github.com/yinhui1129754/elesigncode

2：npm下载：

npm install elesigncode

二：elesigncode常用方法

方法名称	描述	参数	返回值
init	初始化方法	无	无
undo	撤销方法	无	无
redo	重做方法	无	无
toJson	将当前实例签名的数据转化为json	无	无
toPng	获取当前签名的base64位数据png类型	无	无
toJpeg	获取当前签名的base64位数据jpeg类型	无	无
setColor	设置签名的颜色	color:颜色字符串rgb hex均可以	无
setLineWidth	设置线宽	lineWidth:线宽	无
setBgColor	设置背景颜色	bgColor:颜色字符串rgb hex均可以	无
setPen	设置笔的类型	name:'default' 'writing'	无
clear	清除签名	无	无
isEmpty	获取是否签名了	无	返回true表示是没有签名，返回false表示签名了

三：elesigncode实现实例

1：html

<div id="test" style="width: 60%;height: 500px;margin: auto;border: 1px solid #333">
</div>
<button id="undo">撤销</button>
<button id="clear">清除</button>
<button id="getJson">获取json</button>
<button id="downloadPng">获取透明图片</button>
<button id="downloadJpeg">获取不透明图片</button>

2：js

<script type="text/javascript" src="./release/lib/dzjm.min.js"></script>
<script>
    var ele = document.getElementById("test");
    var eleSign = new EleSign({
        ele: null
    });//实例化对象
    eleSign.init(); //初始化
    eleSign.moutedEle(ele) //将签名节点放入到传入的element节点中
 
    eleSign.setPen("default");//设置签名样式：default(默认样式),writing(毛笔样式)
 
    eleSign.setColor('#f00');//设置签名颜色
 
    eleSign.setBgColor('#333');//设置背景颜色
 
    //将当前实例签名的数据转化为json
    document.getElementById("getJson").addEventListener("click", function () {
        var jsonStr = eleSign.toJson();
        console.log(jsonStr);
        alert(jsonStr);
    })
 
    //下载png
    document.getElementById("downloadPng").addEventListener("click", function () {
        if (eleSign.isEmpty() === false) {
            var baseUrl = eleSign.toPng();
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.setAttribute("href", baseUrl);
            a.setAttribute("download", "png图片");
            a.click();
            document.body.removeChild(a);
        } else {
            alert('请签名')
        }
 
    })
 
    //下载jpeg
    document.getElementById("downloadJpeg").addEventListener("click", function () {
        if (eleSign.isEmpty() === false) {
            var baseUrl = eleSign.toJpeg();
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.setAttribute("href", baseUrl);
            a.setAttribute("download", "jpeg图片");
            a.click();
            document.body.removeChild(a);
        } else {
            alert('请签名')
        }
    })
 
    //撤销
    document.getElementById("undo").addEventListener("click", function () {
        eleSign.undo();
    })
    //清除
    document.getElementById("clear").addEventListener("click", function () {
        eleSign.clear();
    })
</script>

如上我们就可以实现电子签名功能了

到此这篇关于基于JavaScript实现电子签名功能的文章就介绍到这了,更多相关JavaScript电子签名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！