<!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--><!--}-->
时间： 2024-12-10 16:41:06