使用JavaScript截圖，這里我要推薦兩款開源組件：一個是Canvas2Image，它可以將Canvas繪圖編程PNG/JPEG/BMP的圖像；但是光有它還不夠，我們需要給任意DOM（至少是絕大部分）截圖，這就需要html2canvas，它可以將DOM對象轉換成一個canvas對象。兩者的功能結合起來，就可以把頁面上的DOM截圖成PNG或者JPEG圖像了，很酷。

Canvas2Image

它的原理是利用了HTML5的canvas對象提供了toDataURL()的API：

這樣的結果是base64編碼的（事實上，image也可以通過這種方式以字符串的形式寫死到頁面上），所以我們還需要一個base64編解碼的lib。

但是目前的缺陷也有不少，比如目前Opera和Safari只支持PNG，FireFox的支持性則好得多。

生成圖片有兩種方式寫入頁面，一種是生成一個圖片對象寫入頁面DOM樹中，這也是支持性比較好的方式：

html2canvas

它作用于DOM加載的過程，收集其中的信息，再來繪制canvas圖像，也就是說，其實它并不是將展現的DOM樹截成canvas圖，而是仿照DOM樹重新繪制了一張canvas圖。于是很多CSS樣式都無法被準確識別出來，無法準確反映到圖上。

其它的限制還有不少，比如：

●javascript必須是同域的，對于跨域的情況需要使用代理服務器（API中有參數可以指定），對于image也同樣；
●frame內的DOM樹無法被準確繪制；
●因為要繪制的是canvas圖，所以像IE8這樣的瀏覽器需要使用FlashCanvas這樣的第三方庫。

這個頁面可以測試各個網站使用它來截圖的效果，效果相當不錯：

API使用的例子：

對于這一類相對小眾的類庫，文檔都是很差的，包括API的定義，需要閱讀源碼，代碼上寫得挺清楚的。

另外，該站點下載包里面還有一個JQuery的插件，對這個API做了一個封裝，可以無視。