关于javascript:js实现电子签名功能

一：elesigncode 拓展包下载

1：github 地址：https://github.com/yinhui1129…

2：npm 下载：

npm install elesigncode

二：elesigncode 罕用办法

三：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>

如上咱们就能够实现电子签名性能了