基于JavaScript实现电子签名功能

npm install elesigncode

<div id="test">
</div>
<button id="undo">撤销</button>
<button id="clear">清除</button>
<button id="getJson">获取json</button>
<button id="downloadPng">获取透明图片</button>
<button id="downloadJpeg">获取不透明图片</button>

<script type="text/javascript" src="https://www.jb51.net/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>