快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)電子簽名功能

更新時(shí)間：2022年11月03日 15:08:56 作者：huaweichenai

這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript實(shí)現(xiàn)簡單的電子簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一：elesigncode拓展包下載

1：github地址：https://github.com/yinhui1129754/elesigncode

2：npm下載：

npm install?elesigncode

二：elesigncode常用方法

方法名稱	描述	參數(shù)	返回值
init	初始化方法	無	無
undo	撤銷方法	無	無
redo	重做方法	無	無
toJson	將當(dāng)前實(shí)例簽名的數(shù)據(jù)轉(zhuǎn)化為json	無	無
toPng	獲取當(dāng)前簽名的base64位數(shù)據(jù)png類型	無	無
toJpeg	獲取當(dāng)前簽名的base64位數(shù)據(jù)jpeg類型	無	無
setColor	設(shè)置簽名的顏色	color:顏色字符串rgb hex均可以	無
setLineWidth	設(shè)置線寬	lineWidth:線寬	無
setBgColor	設(shè)置背景顏色	bgColor:顏色字符串rgb hex均可以	無
setPen	設(shè)置筆的類型	name:'default' 'writing'	無
clear	清除簽名	無	無
isEmpty	獲取是否簽名了	無	返回true表示是沒有簽名，返回false表示簽名了

三：elesigncode實(shí)現(xiàn)實(shí)例

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
    });//實(shí)例化對(duì)象
    eleSign.init(); //初始化
    eleSign.moutedEle(ele) //將簽名節(jié)點(diǎn)放入到傳入的element節(jié)點(diǎn)中
 
    eleSign.setPen("default");//設(shè)置簽名樣式：default(默認(rèn)樣式),writing(毛筆樣式)
 
    eleSign.setColor('#f00');//設(shè)置簽名顏色
 
    eleSign.setBgColor('#333');//設(shè)置背景顏色
 
    //將當(dāng)前實(shí)例簽名的數(shù)據(jù)轉(zhuǎn)化為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('請(qǐng)簽名')
        }
 
    })
 
    //下載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('請(qǐng)簽名')
        }
    })
 
    //撤銷
    document.getElementById("undo").addEventListener("click", function () {
        eleSign.undo();
    })
    //清除
    document.getElementById("clear").addEventListener("click", function () {
        eleSign.clear();
    })
</script>

如上我們就可以實(shí)現(xiàn)電子簽名功能了

到此這篇關(guān)于基于JavaScript實(shí)現(xiàn)電子簽名功能的文章就介紹到這了,更多相關(guān)JavaScript電子簽名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: