網頁截圖或html頁面儲存為圖檔一般考慮兩種方式實作，一種是前端JavaScript實作直接進行截圖轉換為圖檔，另一種是将html代碼發送到背景程式，背景根據html内容重新渲染出圖檔并儲存。
但兩種方式均有限制，前者主要看你使用的JS庫的限制以及浏覽器的限制，後者主要針對靜态html檔案進行，且對于包含CSS檔案以及JS檔案的HTML文檔，解析效果差。
首先看一下前端直接進行截圖導出的情況，網上有很多轉換的插件，用的較多的有：html2canvas插件，下面以該插件為例進行介紹：
第一步，把網頁儲存為Canvas畫布，借助于html2canvas庫，http://html2canvas.hertzen.com/
html2canvas(document.getElementById("id1"), {
onrendered: function(canvas) {
document.getElementById("id2").appendChild(canvas);//生成畫布後如何處理，當然可以在新标簽打開，在浮層展示等等
},
canvas_id: 'canvas'//通過修改html2canvas源碼添加canvas的id
});
Note:html2canvas()第一個參數為要生成canvas的區域，如果整個網頁生成canvas，則是document.body。第二個參數詳見官網設定canvas的各種屬性，當然修改源代碼可以添加自己想要的屬性，如給canvas添加id等。
第二步，把第一步中生成的canvas儲存成圖檔
var canvas = document.getElementById("canvas"),
url = canvas.toDataURL();//
//以下代碼為下載下傳此圖檔功能
var triggerDownload = $("").attr("href", url).attr("download", "img.png").appendTo("body");
triggerDownload[].click();
triggerDownload.remove();
這裡關注toDataURL()方法即可，可以把canvas轉化成data形式的圖檔url，把這個url賦給加載中…标簽即可顯示圖檔，代碼中其他部分為自己需要的下載下傳功能。
該種方式對于某些不能轉換為canvas的元素是不适用的，例如我想講網頁上的地圖瓦片進行截圖導出則不行。接下來看一下第二種方式，前端擷取浏覽器渲染好的HTML頁面，并将頁面中你想儲存為圖檔部分的HTML傳給背景（頁面的标簽要各自帶上樣式，最好别将樣式統一寫到一個CSS檔案中，這樣背景解析可能會有問題），背景根據你傳遞的html進行解析并渲染，然後進行圖檔儲存。背景對于html代碼解析有好多第三方庫，本文采用的是html2image.jar，該庫的是基于NekoHTML 解析器實作的，提供了很友善的接口：
import java.net.MalformedURLException;
import gui.ava.html.Html2Image;
public class HTML2ImageTest {
public static void main(String[] args) throws MalformedURLException {
String srcHtmlString = "<html><head></head><body><div><img src='http://192.98.8.234/vec_w/L4/R6/C12.png' style='visibility: inherit; opacity: 1; position: absolute; left: 793px; top: 402px; width: 256px; height: 256px;' class=''><img src='http://192.98.8.234/vec_w/L4/R5/C12.png' style='visibility: inherit; opacity: 1; position: absolute; left: 793px; top: 146px; width: 256px; height: 256px;' class=''><img src='http://192.98.8.234/vec_w/L4/R6/C13.png' style='visibility: inherit; opacity: 1; position: absolute; left: 1049px; top: 402px; width: 256px; height: 256px;' class=''></div></body></html>";
final Html2Image html2Image = Html2Image.fromHtml(srcHtmlString);
html2Image.getImageRenderer().saveImage("d:/baidu.png");
// html2Image.getHtmlImageMap().saveImageMapDocument("baidu.html", "baidu.png");
}
}
利用該方式，成功将網頁上的瓦片地圖進行儲存為本地圖檔了！！
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)