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 type
var 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 Hertzen
Released under MIT License
*/
// 篇幅太长，无奈保留请查看原文 附录：
Base64：Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一，Base64 就是一种基于 64 个可打印字符来示意二进制数据的办法。Base64 编码是从二进制到字符的过程，可用于在 HTTP 环境下传递较长的标识信息。采纳 Base64 编码具备不可读性，须要解码后能力浏览。
Canvas：Canvas API（画布）是在 HTML5 中新增的标签用于在网页实时生成图像，并且能够操作图像内容，基本上它是一个能够用 JavaScript 操作的位图（bitmap）。Canvas 对象示意一个 HTML 画布元素 – <canvas>。它没有本人的行为，然而定义了一个 API 反对脚本化客户端绘图操作。
浏览原文：https://blog.mazey.net/1926.html