一：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="https://www.atool.online/article/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电子签名内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
