用jSignature插件做簽字板并保存為圖片的方法

來源：懂視網(wǎng) 責編：小OO 時間：2020-11-27 19:58:55

用jSignature插件做簽字板并保存為圖片的方法

第一步：環(huán)境準備；jquery、jSignature。第二步：demo編寫。<。--[if lt IE 9]>；<；script src="；jSignature/flashcanvas.js"；>；<；/script>；<；第三步：測試；經(jīng)測試，成功。

推薦度：

點擊下載本文 文檔為doc格式

導讀第一步：環(huán)境準備；jquery、jSignature。第二步：demo編寫。<。--[if lt IE 9]>；<；script src="；jSignature/flashcanvas.js"；>；<；/script>；<；第三步：測試；經(jīng)測試，成功。

今天要講的是用jquery插件jSignature做一個手寫板簽字的功能，并將簽字筆跡保存為圖片，下面就是實戰(zhàn)案例，一起跟隨小編來看一下。

第一步：環(huán)境準備

jquery、jSignature

第二步：demo編寫

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>手寫板簽名demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8">
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
 <p id="signature"></p>
 <p style="text-align: center">
 <b style="color: red">請按著鼠標寫字簽名。</b>
 </p>
 <input type="button" value="保存" id="yes"/>
 <input type="button" value="下載" id="download"/>
 <input type="button" value="重寫" id="reset"/>
 <p id="someelement"></p>
 <script src="jquery-2.0.3.min.js"></script>
 <!--[if lt IE 9]>
 <script src="jSignature/flashcanvas.js"></script>
 <![endif]-->
 <script src="jSignature/jSignature.min.js"></script>
 <script>
 $(function() {
 var $sigp = $("#signature");
 $sigp.jSignature(); // 初始化jSignature插件.
 $("#yes").click(function(){
 //將畫布內(nèi)容轉(zhuǎn)換為圖片
 var datapair = $sigp.jSignature("getData", "image");
 var i = new Image();
 i.src = "data:" + datapair[0] + "," + datapair[1];
 $(i).appendTo($("#someelement")); // append the image (SVG) to DOM.
 });
 //datapair = $sigp.jSignature("getData","base30");
 //$sigp.jSignature("setData", "data:" + datapair.join(","));
 $("#download").click(function(){
 downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src")));
 });
 $("#reset").click(function(){
 $sigp.jSignature("reset"); //重置畫布，可以進行重新作畫.
 $("#someelement").html("");
 });
 });
 function downloadFile(fileName, blob){
 var aLink = document.createElement('a');
 var evt = document.createEvent("HTMLEvents");
 evt.initEvent("click", false, false);//initEvent 不加后兩個參數(shù)在FF下會報錯, 感謝 Barret Lee 的反饋
 aLink.download = fileName;
 aLink.href = URL.createObjectURL(blob);
 aLink.dispatchEvent(evt);
 }
 /**
 * 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
 * @param urlData
 * 用url方式表示的base64圖片數(shù)據(jù)
 */
 function convertBase64UrlToBlob(urlData){
 
 var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭，并轉(zhuǎn)換為byte
 
 //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
 var ab = new ArrayBuffer(bytes.length);
 var ia = new Uint8Array(ab);
 for (var i = 0; i < bytes.length; i++) {
 ia[i] = bytes.charCodeAt(i);
 }
 
 return new Blob( [ab] , {type : 'image/png'});
 }
 </script>
 
</body>
</html>

第三步：測試
經(jīng)測試，成功！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

用jSignature插件做簽字板并保存為圖片的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片簽名插件

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

用jSignature插件做簽字板并保存為圖片的方法

用jSignature插件做簽字板并保存為圖片的方法

用jSignature插件做簽字板并保存為圖片的方法

最新推薦

猜你喜歡

熱門推薦