js實現電子簽名功能

huaweichenai發表於2022-07-17
JS

一：elesigncode擴充包下載

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

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="./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>

如上我們就可以實現電子簽名功能了

相關文章