用JavaScript截圖

用JavaScript，這裡我要推薦兩款開源組件：一個是Canvas2Image，它可以將Canvas繪圖編程PNG/JPEG/BMP的映像；但是光有它還不夠，我們需要給任意DOM（至少是絕大部分），這就需要html2canvas，它可以將DOM對象轉換成一個canvas對象。兩者的功能結合起來，就可以把頁面上的DOM成PNG或者JPEG映像了，很酷。 Canvas2Image 它的原理是利用了HTML5的canvas對象提供了toDataURL()的API： var strDataURI = oCanvas.toDataURL();  // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."這樣的結果是base64編碼的（事實上，image也可以通過這種方式以字串的形式寫死到頁面上），所以我們還需要一個base64編解碼的lib。 但是目前的缺陷也有不少，比如目前Opera和Safari只支援PNG，FireFox的支援性則好得多。 產生圖片有兩種方式寫入頁面，一種是產生一個圖片對象寫入頁面DOM樹中，這也是支援性比較好的方式： // returns an <img> element containing the converted PNG image  var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);     但是如果你做一個JavaScript功能的話，你可能希望後能夠自動開啟儲存檔案的“儲存”對話方塊： Canvas2Image.saveAsPNG(oCanvas);// will prompt the user to save the image as PNG.  這個方式調用會產生一個mimeType為“image/octet-stream”的資料流到瀏覽器，但是“儲存”對話方塊無法識別出圖片適當的尾碼名，預設儲存的檔案在FireFox下是“xxx.part”這種名字，這是令人遺憾的地方，但是似乎沒有什麼好辦法解決。 html2canvas 它作用於DOM載入的過程，收集其中的資訊，再來繪製canvas映像，也就是說，其實它並不是將展現的DOM樹截成canvas圖，而是仿照DOM樹重新繪製了一張canvas圖。於是很多CSS樣式都無法被準確識別出來，無法準確反映到圖上。 其它的限制還有不少，比如： javascript必須是同域的，對於跨域的情況需要使用Proxy 伺服器（API中有參數可以指定），對於image也同樣；frame內的DOM樹無法被準確繪製；因為要繪製的是canvas圖，所以像IE8這樣的瀏覽器需要使用FlashCanvas這樣的第三方庫。這個頁面可以測試各個網站使用它來的效果，效果相當不錯：  API使用的例子： html2canvas(    [dom1, dom2],    {        logging: false,        useCORS: false,        proxy:   false,        onrendered: function(canvas){            // canvas 就是繪製的canvas是對象        }    });對於這一類相對小眾的類庫，文檔都是很差的，包括API的定義，需要閱讀源碼，代碼上寫得挺清楚的。 另外，該網站下載包裡面還有一個JQuery的外掛程式，對這個API做了一個封裝，可以無視。