JS to realize the function of electronic signature

One ：elesigncode Expansion package download

1：github Address ：https://github.com/yinhui1129754/elesigncode

2：npm download ：

npm install elesigncode

Two ：elesigncode Common methods

3、 ... and ：elesigncode Implementation examples

1：html

<div id="test" style="width: 60%;height: 500px;margin: auto;border: 1px solid #333">
</div>
<button id="undo"> revoke </button>
<button id="clear"> eliminate </button>
<button id="getJson"> obtain json</button>
<button id="downloadPng"> Get transparent pictures </button>
<button id="downloadJpeg"> Get opaque pictures </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
    });// Instantiate objects 
    eleSign.init(); // initialization 
    eleSign.moutedEle(ele) // Put the signature node into the incoming element In nodes 

    eleSign.setPen("default");// Set the signature style ：default( Default style ),writing( Brush style )

    eleSign.setColor('#f00');// Set the signature color 

    eleSign.setBgColor('#333');// Set the background color 

    // Convert the data signed by the current instance into json
    document.getElementById("getJson").addEventListener("click", function () {
        var jsonStr = eleSign.toJson();
        console.log(jsonStr);
        alert(jsonStr);
    })

    // download 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 picture ");
            a.click();
            document.body.removeChild(a);
        } else {
            alert(' Please sign your name. ')
        }

    })

    // download 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 picture ");
            a.click();
            document.body.removeChild(a);
        } else {
            alert(' Please sign your name. ')
        }
    })

    // revoke 
    document.getElementById("undo").addEventListener("click", function () {
        eleSign.undo();
    })
    // eliminate 
    document.getElementById("clear").addEventListener("click", function () {
        eleSign.clear();
    })
</script>

As above, we can realize the function of electronic signature