jSignature在线签字板保存为图片
生活随笔
收集整理的這篇文章主要介紹了
jSignature在线签字板保存为图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
<b>請按著鼠標寫字簽名。</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在线签字板保存为图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序被冻结，忘记原始ID，如何找回？
- 下一篇： Oracle定义常量和变量