網頁div元素匯出成圖片 JS+html2canvas
最近因為專案的需要，需將頁面裡的圖表元素變成圖片並下載到本地。經過我的一段研究，最終利用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屬性值
action="http://svg.sencha.io"是ExtJS提供的遠端後臺服務，你可以自己在後臺寫一個介面將接收到的資料回傳給客戶端。相容性：非IE的主流瀏覽器、IE、Edge。
以上就是我目前找到的一些解決方法，如果還有其他的好方法的話，希望您不要吝惜您的知識，在下面留言交流。