jSignature手写签名
Posted Tiger_gogogo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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> <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="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/jSignature/2.1.3/flashcanvas.js"></script> <![endif]--> <script src="https://cdn.bootcss.com/jSignature/2.1.3/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.image = datapair[1]; $(i).appendTo($("#someelement")); // append the image (SVG) to DOM. alert(encodeURIComponent(i.image)); var t = new Date(); $.ajax({ url: "/2.php?t="+t, //dataType: "json", contentType: "application/json; charset=utf-8", data: "{"image_data":"" + encodeURIComponent(i.image) + ""}",//避免base64长度过大，json传输 type: "post", cache: false, success: function (msg) { if (msg.code === 1) { alert("上传成功"); } else { alert("上传失败"); } } }); }); //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> 2.php <?php $image_data = json_decode(file_get_contents(‘php://input‘), true); //只能这样接收 $data = rawurldecode($image_data[‘image_data‘]); $file_name = time().‘.png‘; //必须png $a = file_put_contents($file_name, base64_decode($data)); ?>
以上是关于jSignature手写签名的主要内容，如果未能解决你的问题，请参考以下文章
jSignature做手动签名,canvas支持触摸屏的签名涂鸦插件