<!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{
30%;
border-radius: 15px;
border:1px #ccc solid;
}
#signature{
90%;
height:150px;
border:1px solid #000;
margin:0 auto;
overflow: hidden;
background-color:#fff;"
}
#someelement{
90%;
margin:0 auto;
}
#qianButton{
text-align: center;
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,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-->
<!--}-->