导出带图片html,网页div元素导出成图片 JS+html2canvas

hahahaha canvas

haha

button to get image

html2canvas(document.getElementById("div_target"),{

onrendered: function(canvas) {

var imgURL=canvas.toDataURL("image/png");

$('#myIMG').attr("src",imgURL);

$('#b').on('click',function(){

$('#down_qr').attr('download',imgURL);

$('#down_qr').attr('href',imgURL);

document.getElementById('down_qr').click();

});

}

});

兼容性：非IE的主流浏览器、Edge13+。对于IE10-11，可以使用window.navigator.msSaveOrOpenBlob(blob, filename) 来实现。

(2)将base64编码的图片数据在新的标签页中打开的方式进行下载。

html2canvas(document.getElementById("div_target"),{

onrendered: function(canvas) {

var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

window.open(imgURL);

}

});

兼容性：非IE的主流浏览器、Edge。

(3)创建form表单，将canvas图片传到后台接口，并获得返回的图片进行下载。这种方法在ie和chrome等浏览器上面都能正常使用，下面的代码我是借鉴了ExtJS中chart.download方法写的，简单粗暴。

html2canvas(document.getElementById("div_target"),{

onrendered: function(canvas) {

var imgURL = canvas.toDataURL("image/png");

var str='