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

最近因为项目的需要,需将页面里的图表元素变成图片并下载到本地。经过我的一段研究,最终利用html2canvas插件以及js实现了这一功能。

1.将div转换为canvas

这里为了将div元素能够导出成图片,第一步需要将html元素转换成canvas,了解html5的朋友应该都知道canvas,它类似于一个画布。这里需要用到html2canvas插件,它github上的一个开源的项目,它作用是将HTML内容转换成一个canvas对象。

下载地址:https://github.com/niklasvh/html2canvas/releases点击打开链接

html2canvas兼容的浏览器版本:

网页div元素导出成图片 JS+html2canvas_第1张图片


这里由于我需要兼容IE以及其他的主流浏览器,我下载的版本是v0.4.1 - 7.9.2013,因为最新的v0.5.0-beta4版本它使用了一些ES6的技术,所以会在IE浏览器上不兼容!
html2canvas的基本用法:

html2canvas(document.doby,{
    onrendered: function(canvas) {//得到了canvas对象
    	var imgUrl = canvas.toDataURL("image/png");//这里通过canvas的toDataURL方法把它转换成base64编码。
    }
});

2.将生成的canvas下载为图片

下面列出集中下载为图片的方法,并会给出每种方法所兼容的浏览器。

(1)利用html5中标签的download属性强制将指定的链接作为下载链接,点击链接以后,无论指向的链接是什么类型,都会被下载下来。

hahahaha canvas

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='

你可能感兴趣的:(javascript)