오늘 이야기할 내용은 jquery 플러그인 jSignature를 사용하여 필기 패드 서명 기능을 만들고 서명 필기를 사진으로 저장하는 것입니다. 다음은 편집기를 따라가는 실제 사례입니다.
1단계: 환경 준비
jquery, jSignature
2단계: 데모 작성
<!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> <p id="signature"></p> <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"/> <p id="someelement"></p> <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 $sigp = $("#signature"); $sigp.jSignature(); // 初始化jSignature插件. $("#yes").click(function(){ //将画布内容转换为图片 var datapair = $sigp.jSignature("getData", "image"); var i = new Image(); i.src = "data:" + datapair[0] + "," + datapair[1]; $(i).appendTo($("#someelement")); // append the image (SVG) to DOM. }); //datapair = $sigp.jSignature("getData","base30"); //$sigp.jSignature("setData", "data:" + datapair.join(",")); $("#download").click(function(){ downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src"))); }); $("#reset").click(function(){ $sigp.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>
3단계: 테스트
테스트 후 성공!
위 내용은 jSignature 플러그인을 사용하여 서명 패드를 만들고 그림으로 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!