js implements electronic signature function

1: Download the elesigncode expansion package

1: github address: https://github.com/yinhui1129754/elesigncode

2: npm download:

 npm install elesigncode

Two: commonly used methods of elesigncode

method name	describe	parameter	return value
init	initialization method	none	none
undo	Cancellation method	none	none
redo	redo method	none	none
toJson	Convert the data signed by the current instance to json	none	none
toPng	Get the base64-bit data png type of the current signature	none	none
toJpeg	Get the base64-bit data jpeg type of the current signature	none	none
setColor	Set the color of the signature	color: color string rgb hex can be	none
setLineWidth	set line width	lineWidth: line width	none
setBgColor	set background color	bgColor: color string rgb hex can be	none
setPen	Set the type of pen	name:'default' 'writing'	none
clear	clear signature	none	none
isEmpty	Get whether it is signed	none	Returning true means no signature, returning false means signed

Three: elesigncode implementation example

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>

As above, we can realize the electronic signature function