<!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>
<style>
#qianMin input{
width:30%;
border-radius: 15px;
border:1px #ccc solid;
}
#signature{
width:90%;
height:150px;
border:1px solid #000;
margin:0 auto;
overflow: hidden;
background-color:#fff;"
}
#someelement{
width:90%;
margin:0 auto;
}
#qianButton{
text-align: center;
width:250px;margin:0 auto;
margin-top:20px;
}
</style>
<body>
<div id="qianMin">
<div id="signature"></div>
<div id="someelement"></div>
<div id="qianButton">
<input type="button" value="保存" id="yes"/>
<input type="button" value="重寫" id="reset"/>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/flashcanvas.js"></script>
<script src="js/jSignature.min.js"></script>
<script>
$(function() {
var dWidth = document.getElementById('signature').style.width;
var $sigdiv = $("#signature");
$sigdiv.jSignature({height:200,width:dWidth,lineWidth:"2",signatureLine:false});
$("#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.
});
$("#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);
// }
// 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>
<!--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-->
<!--}-->
用jq中jSignature做手動簽名
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。