<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5签名</title> <style> #signature, #someElement { border: 1px solid rgb(204, 204, 204); } </style> </head> <body> <!--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--> <!--}--> <div id="signature"></div> <button οnclick="doUpSignature()">导出签名</button> <button οnclick="doDownLoadSignature()">下载签名</button> <button οnclick="clearSignature()">清除画布</button> <button οnclick="doResetSignature()">重置画布</button> <button οnclick="doSetSignature()">重新导入画布</button> <div id="someElement"> </div> <script src="../../jSignature-master/libs/jquery.js"></script> <!--[if lt IE 9]> <script src="../../jSignature-master/libs/flashcanvas.js"></script> <![endif]--> <script src="../../jSignature-master/libs/jSignature.min.js"></script> <script> var base30; /*横竖屏改变时，画布会重新初始化*/ $(document).ready(function () { $("#signature").jSignature(); /*初始化画布*/ }); /*重置画布 */ function doResetSignature() { $("#signature").jSignature("reset"); } //清除画布并重新渲染 function clearSignature() { $("#signature").jSignature("clear"); } /*导出签名制成图片*/ function doUpSignature() { var signature = $("#signature"); // 获取签名的SVG和呈现在浏览器中的SVG. var dataPair = signature.jSignature("getData", "image"); //此导出插件返回数组[MIMETYPE，签名的SVG的base64编码字符串划] /*var dataPair = signature.jSignature("getData", "svgbase64");*/ console.log(dataPair); // 获取签名的“base30”数据对 base30 = signature.jSignature("getData", "base30"); var array = dataPair.splice(","); var i = new Image(); i.src = "data:" + array[0] + "," + array[1]; $(i).appendTo($("#someElement"));// 添加图像（SVG），到 DOM } /*重新导入签名*/ function doSetSignature() { var imgList = $("#someElement").find("img"); if (imgList.length > 0) { console.log(imgList[0].src); var svgBaseData = imgList[0].src.split(","); console.log(svgBaseData); //重新导入数据到jSignature。 $("#signature").jSignature("setData", "data:" + base30.join(",")); } } /*下载图片*/ function doDownLoadSignature() { downloadFile("a.png", $("img").attr("src")); } function downloadFile(fileName, content) { var aLink = document.createElement('a'); var blob = base64ToBlob(content); //new Blob([content]); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.click(); aLink.dispatchEvent(evt); } //base64转blob function base64ToBlob(code) { var parts = code.split(';base64,'); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); } /** * 将以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>
