<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5簽名</title> <style> #signature, #someElement { border: 1px solid rgb(204, 204, 204); } </style> </head> <body> <!--settings = {--> <!--'width' : 'ratio' 定義畫布的寬度。數值沒有%或px--> <!--,'height' : 'ratio' 定義畫布的高度。數值沒有%或px--> <!--,'sizeRatio': 4 // only used when height = 'ratio'--> <!--,'color' : '#000' 定義了中風在畫布上的顏色。接受任何顏色的十六進制值--> <!--,'background-color': '#fff' 定義了畫布的背景顏色。接受任何顏色的十六進制值。--> <!--,'decor-color': '#eee'--> <!--,'lineWidth' : 0 定義的厚度。接受任何積極的數值--> <!--,'minFatFingerCompensation' : -10--> <!--,'showUndoButton': false--> <!--,'readOnly': false--> <!--,'data': []--> <!--,'signatureLine': false--> <!--}--> <div id="signature"></div> <button οnclick="doUpSignature()">導出簽名</button> <button οnclick="doDownLoadSignature()">下載簽名</button> <button οnclick="clearSignature()">清除畫布</button> <button οnclick="doResetSignature()">重置畫布</button> <button οnclick="doSetSignature()">重新導入畫布</button> <div id="someElement"> </div> <script src="../../jSignature-master/libs/jquery.js"></script> <!--[if lt IE 9]> <script src="../../jSignature-master/libs/flashcanvas.js"></script> <![endif]--> <script src="../../jSignature-master/libs/jSignature.min.js"></script> <script> var base30; /*橫豎屏改變時，畫布會重新初始化*/ $(document).ready(function () { $("#signature").jSignature(); /*初始化畫布*/ }); /*重置畫布 */ function doResetSignature() { $("#signature").jSignature("reset"); } //清除畫布並重新渲染 function clearSignature() { $("#signature").jSignature("clear"); } /*導出簽名製成圖片*/ function doUpSignature() { var signature = $("#signature"); // 獲取簽名的SVG和呈現在瀏覽器中的SVG. var dataPair = signature.jSignature("getData", "image"); //此導出插件返回數組[MIMETYPE，簽名的SVG的base64編碼字符串劃] /*var dataPair = signature.jSignature("getData", "svgbase64");*/ console.log(dataPair); // 獲取簽名的“base30”數據對 base30 = signature.jSignature("getData", "base30"); var array = dataPair.splice(","); var i = new Image(); i.src = "data:" + array[0] + "," + array[1]; $(i).appendTo($("#someElement"));// 添加圖像（SVG），到 DOM } /*重新導入簽名*/ function doSetSignature() { var imgList = $("#someElement").find("img"); if (imgList.length > 0) { console.log(imgList[0].src); var svgBaseData = imgList[0].src.split(","); console.log(svgBaseData); //重新導入數據到jSignature。 $("#signature").jSignature("setData", "data:" + base30.join(",")); } } /*下載圖片*/ function doDownLoadSignature() { downloadFile("a.png", $("img").attr("src")); } function downloadFile(fileName, content) { var aLink = document.createElement('a'); var blob = base64ToBlob(content); //new Blob([content]); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false);//initEvent 不加後兩個參數在FF下會報錯 事件類型，是否冒泡，是否阻止瀏覽器的默認行爲 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.click(); aLink.dispatchEvent(evt); } //base64轉blob function base64ToBlob(code) { var parts = code.split(';base64,'); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); } /** * 將以base64的圖片url數據轉換爲Blob * @param urlData * 用url方式表示的base64圖片數據 */ function convertBase64UrlToBlob(urlData) { var bytes = window.atob(urlData.split(',')[1]); //去掉url的頭，並轉換爲byte //處理異常,將ascii碼小於0的轉換爲大於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>
