通过 JS 将 BSAE64 生成图片并下载

HTML：

<div style=\"display:block;margin:0 auto;width:638px;height:795px;\"><div id=\"render\" >CONTENT</div></div><div id=\"template\" style=\"margin:10px 0 0 385px;\"><input type=\"button\" onclick=\"qc0926()\" value=\"下载图片\" /></div>

JS：

<script type=\"text/javascript\" src=\"html2canvas.js\"></script><script type=\"text/javascript\">var canvas,render,html,imgsrcgo;function renderHTMLAndSave() {var render= document.getElementById(\'render\');html2canvas(render).then(function (canvas) {var imgsrc= canvas.toDataURL();imgsrcgo=imgsrc;});}window.onload=renderHTMLAndSave();var imgsrc;var imgData;var type=\'png\';var _fixType = function(type) {type = type.toLowerCase().replace(/jpg/i, \'jpeg\');var r = type.match(/png|jpeg|bmp|gif/)[0];return \'image/\' + r;};function saveFile(data, filename){var save_link = document.createElementNS(\'http://www.w3.org/1999/xhtml\', \'a\');save_link.href = data;save_link.download = filename;var event = document.createEvent(\'MouseEvents\');event.initMouseEvent(\'click\', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};function qc0926(){imgData=imgsrcgo;imgData = imgData.replace(_fixType(type),\'image/octet-stream\'); // 加工image data，替换mime typevar filename = \'zgsjdomaincertification\' + \'_name\' + \'.\' + type; // 下载后的文件名window.load=saveFile(imgData,filename); //下载域名证书};</script>

html2canvas.js – 代码：

/*html2canvas 0.5.0-alpha2 <http://html2canvas.hertzen.com>Copyright (c) 2015 Niklas von HertzenReleased under MIT License*/// 篇幅太长，无法保存请查看原文

附录：

Base64：Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一，Base64 就是一种基于 64 个可打印字符来表示二进制数据的方法。Base64 编码是从二进制到字符的过程，可用于在 HTTP 环境下传递较长的标识信息。采用 Base64 编码具有不可读性，需要解码后才能阅读。

Canvas：Canvas API（画布）是在 HTML5 中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用 JavaScript 操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 –