1. 下载并引入 html2canvas.js
2. 页面
<div id="testId"> XXX </div>
3. js 生成并保存图片
function downPNG(pngName, pngId){
html2canvas(document.getElementById(pngId), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/octet-stream');
if (canvas.msToBlob) { // IE 9+浏览器
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, pngName);
}else {
saveFile(imgData,pngName);
}
}
});
}
var saveFile = function(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);
};
4. 传入页面id，点击按钮下载并保存该区域为图片
$(document).on("click",'.btn-save',function(){
downPNG( 'test.png','testId');
});
