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

最新推荐文章于 2024-08-20 11:35:04 发布

岗少

最新推荐文章于 2024-08-20 11:35:04 发布

阅读量1.9w

点赞数 3

分类专栏： javascript 文章标签： html5 javascript canvas 图片 html

本文链接：https://blog.csdn.net/cnyellow930/article/details/78608716

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

1.将div转换为canvas

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

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

html2canvas兼容的浏览器版本：

这里由于我需要兼容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中<a>标签的download属性强制将指定的链接作为下载链接，点击链接以后，无论指向的链接是什么类型，都会被下载下来。

<div id="div_target">
    <span>hahahaha canvas</span>
</div>
<a id="down_qr" href="#" style="display: none">haha</a>
<button id="b">button to get image</button><br>
<img id="myIMG" src= "./chart.png"/>

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='<html><head></head><body><form method="POST" action="http://svg.sencha.io"><input type="hidden" name="version" value="2"/><input type="hidden" name="data" value="'+imgURL+'"/><input type="hidden" name="width" value="600"/><input type="hidden" name="height" value="400"/><input type="hidden" name="filename" value="Chart"/></form><script type="text/javascript">document.getElementsByTagName("form")[0].submit();<\/script><\/body><\/html>';
    	window.open().document.write(str);
    }
});

可以看到上面的form表单中action属性值