用JavaScript截圖

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

 

Canvas2Image

 

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

/URLv

age/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

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

 

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

 

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

 

// returns an 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樹截成仿vasvas圖，而是重新繪製了一張canvas圖。於是很多CSS樣式都無法被準確辨識出來，無法準確反映在圖上。

 

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

 

javascript必須是同域的，對於跨域的情況需要使用代理伺服器（API中有參數可以指定），對於image也同樣；

frame內的DOM樹無法被準確繪製；

因為要繪製的是canvas圖，所以像IE8這樣的瀏覽器需要使用FlashCanvas這樣的第三方函式庫。

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

API使用的例子：

 

      logging: false,

        useCORS: false,

        proxy:   false,

   ¢就是繪製的canvas是物件

        }

    }

);

對於這一類相對小眾的類別庫，文件都是很差的，包括API的定義，需要閱讀原始碼，程式碼上寫得挺清楚的。

 

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