jSignature在線簽字板保存為圖片
阿新 • • 發佈：2019-03-06
一個 eset 兩個 com att title false str turn
<!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> <div id="signature"></div> <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"/> <div id="someelement"></div> <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 $sigdiv = $("#signature"); $sigdiv.jSignature(); // 初始化jSignature插件. $("#yes").click(function(){ //將畫布內容轉換為圖片 var datapair = $sigdiv.jSignature("getData", "image"); var i = new Image(); i.src = "data:" + datapair[0] + "," + datapair[1]; $(i).appendTo($("#someelement")); // append the image (SVG) to DOM. //var data = $sigdiv.jSignature(‘getData‘, ‘default‘) //console.log(data); 這個和上面得到的結果一樣 }); //datapair = $sigdiv.jSignature("getData","base30"); //$sigdiv.jSignature("setData", "data:" + datapair.join(",")); $("#download").click(function(){ downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src"))); }); $("#reset").click(function(){ $sigdiv.jSignature("reset"); //重置畫布，可以進行重新作畫. $("#someelement").html(""); }); }); function downloadFile(fileName, blob){ var aLink = document.createElement(‘a‘); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false);//initEvent 不加後兩個參數在FF下會報錯, 感謝 Barret Lee 的反饋 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt); } /** * 將以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>
手寫簽字板 另一個參考用（跟代碼無關）
方法詳解
jSignature 是一個通過捕捉筆畫的矢量輪廓輸出多種格式數據的jQuery插件，通過該插件我們可以實現繪畫板、手寫簽名等功能。
使用該插件需要引入jQuery和jSignature.js，首先初始化jSignature：
var $signature = $("#signature").jSignature();
接下來即可使用插件提供的一些常見的操作：
（1）、重置畫布
$signature.jSignature(‘reset‘)
（2）、獲取數據並展示
//獲取數據
var data = $signature.jSignature(‘getData‘, ‘default‘)
//圖片展示
var img = new Image()
img.src = data
$(img).appendTo($(‘#signimg‘))
//將數據顯示在文本框
$(‘#text‘).val(data)
（3）、撤銷上一步(引入jSignature.UndoButton.js)
//初始化時傳入參數 {‘UndoButton‘:true}
$("#signature").jSignature({‘UndoButton‘:true});
（4）、繪畫板，例如設置筆觸的顏色
//加入方法setColor
‘setColor‘ : function(color) {
// 獲取 context 對象
var context2D = this.find(‘canvas.‘+apinamespace)
.add(this.filter(‘canvas.‘+apinamespace))
.data(apinamespace+‘.this‘).canvasContext
//設置陰影的顏色
context2D.shadowColor = ‘transparent‘
//設置筆觸顏色
context2D.strokeStyle = color
return
}
jSignature在線簽字板保存為圖片