基于JavaScript實(shí)現(xiàn)電子簽名功能
一:elesigncode拓展包下載
1:github地址:https://github.com/yinhui1129754/elesigncode
2:npm下載:
npm install?elesigncode
二:elesigncode常用方法
| 方法名稱 | 描述 | 參數(shù) | 返回值 |
|---|---|---|---|
| init | 初始化方法 | 無(wú) | 無(wú) |
| undo | 撤銷方法 | 無(wú) | 無(wú) |
| redo | 重做方法 | 無(wú) | 無(wú) |
| toJson | 將當(dāng)前實(shí)例簽名的數(shù)據(jù)轉(zhuǎn)化為json | 無(wú) | 無(wú) |
| toPng | 獲取當(dāng)前簽名的base64位數(shù)據(jù)png類型 | 無(wú) | 無(wú) |
| toJpeg | 獲取當(dāng)前簽名的base64位數(shù)據(jù)jpeg類型 | 無(wú) | 無(wú) |
| setColor | 設(shè)置簽名的顏色 | color:顏色字符串rgb hex均可以 | 無(wú) |
| setLineWidth | 設(shè)置線寬 | lineWidth:線寬 | 無(wú) |
| setBgColor | 設(shè)置背景顏色 | bgColor:顏色字符串rgb hex均可以 | 無(wú) |
| setPen | 設(shè)置筆的類型 | name:'default' 'writing' | 無(wú) |
| clear | 清除簽名 | 無(wú) | 無(wú) |
| isEmpty | 獲取是否簽名了 | 無(wú) | 返回true表示是沒(méi)有簽名,返回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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS動(dòng)態(tài)插入腳本和插入引用外部鏈接腳本的方法
js 動(dòng)態(tài)插入腳本的是在頁(yè)面加載時(shí)不存在,但將來(lái)的某一時(shí)刻通過(guò)修改該 DOM 動(dòng)態(tài)添加的腳本。接下來(lái)通過(guò)本文給大家介紹JS動(dòng)態(tài)插入腳本和插入引用外部鏈接腳本,需要的朋友可以參考下2018-05-05
three.js著色器材質(zhì)的內(nèi)置變量示例詳解
這篇文章主要給大家介紹了關(guān)于three.js著色器材質(zhì)內(nèi)置變量的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
解決 FireFox 下[使用event很麻煩] 的問(wèn)題.
解決 FireFox 下[使用event很麻煩] 的問(wèn)題....2006-08-08
webpack4升級(jí)到webpack5的實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)
有些老項(xiàng)目的包長(zhǎng)時(shí)間沒(méi)有更新,導(dǎo)致項(xiàng)目中有些性能問(wèn)題,在項(xiàng)目迭代中考慮升級(jí)包,下面這篇文章主要給大家介紹了關(guān)于webpack4升級(jí)到webpack5的實(shí)戰(zhàn)經(jīng)驗(yàn),需要的朋友可以參考下2022-08-08
JS實(shí)現(xiàn)消息來(lái)時(shí)讓網(wǎng)頁(yè)標(biāo)題閃動(dòng)效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)消息來(lái)時(shí)讓網(wǎng)頁(yè)標(biāo)題閃動(dòng)效果的方法,實(shí)例分析了JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素的技巧,并附帶了開(kāi)心網(wǎng)的標(biāo)題閃動(dòng)解決方案,需要的朋友可以參考下2016-04-04
簡(jiǎn)單談?wù)凜ommonsChunkPlugin抽取公共模塊
下面小編就為大家分享一篇簡(jiǎn)單談?wù)凜ommonsChunkPlugin抽取公共模塊,具有很的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
一文詳解如何用原型鏈的方式實(shí)現(xiàn)JS繼承
JavaScript中,每當(dāng)創(chuàng)建一個(gè)對(duì)象,都會(huì)給這個(gè)對(duì)象提供一個(gè)內(nèi)置對(duì)象 [[Prototype]] 。這個(gè)對(duì)象就是原型對(duì)象,[[Prototype]] 的層層嵌套就形成了原型鏈。本文將詳細(xì)講解如何用原型鏈的方式實(shí)現(xiàn)一個(gè) JS 繼承,感興趣的可以了解下2022-04-04
實(shí)例代碼詳解javascript實(shí)現(xiàn)窗口抖動(dòng)及qq窗口抖動(dòng)
這篇文章主要介紹了實(shí)例代碼詳解javascript實(shí)現(xiàn)窗口抖動(dòng)及qq窗口抖動(dòng)的相關(guān)資料,需要的朋友可以參考下2016-01-01
微信小程序開(kāi)發(fā)之實(shí)現(xiàn)心情記事本
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的心情記事本,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01

