首頁 > web前端 > js教程 > JavaScript實作網頁截圖功能_javascript技巧

JavaScript實作網頁截圖功能_javascript技巧

WBOY
發布: 2016-05-16 16:34:00
原創
1797 人瀏覽過

使用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 JavaScript實作網頁截圖功能_javascript技巧 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必須是同域的,對於跨域的情況需要使用代理伺服器(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做了一個封裝,可以無視。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板