欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截圖功能

 更新時(shí)間：2014年10月16日 08:52:27   作者：四火  
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截圖功能,本文介紹了2款實(shí)現(xiàn)JavaScript截圖的開(kāi)源組件,一個(gè)是Canvas2Image,一個(gè)是html2canvas,需要的朋友可以參考下

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

Canvas2Image

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

復(fù)制代碼 代碼如下:

var strDataURI = oCanvas.toDataURL(); 
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

這樣的結(jié)果是base64編碼的（事實(shí)上，image也可以通過(guò)這種方式以字符串的形式寫(xiě)死到頁(yè)面上），所以我們還需要一個(gè)base64編解碼的lib。

但是目前的缺陷也有不少，比如目前Opera和Safari只支持PNG，F(xiàn)ireFox的支持性則好得多。

生成圖片有兩種方式寫(xiě)入頁(yè)面，一種是生成一個(gè)圖片對(duì)象寫(xiě)入頁(yè)面DOM樹(shù)中，這也是支持性比較好的方式：

復(fù)制代碼 代碼如下:

// returns an <img> element containing the converted PNG image 
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

但是如果你做一個(gè)JavaScript截圖功能的話，你可能希望截圖后能夠自動(dòng)打開(kāi)保存文件的“保存”對(duì)話框：

復(fù)制代碼 代碼如下:

Canvas2Image.saveAsPNG(oCanvas);
// will prompt the user to save the image as PNG.

這個(gè)方式調(diào)用會(huì)生成一個(gè)mimeType為“image/octet-stream”的數(shù)據(jù)流到瀏覽器，但是“保存”對(duì)話框無(wú)法識(shí)別出圖片適當(dāng)?shù)暮缶Y名，默認(rèn)保存的文件在FireFox下是“xxx.part”這種名字，這是令人遺憾的地方，但是似乎沒(méi)有什么好辦法解決。

html2canvas

它作用于DOM加載的過(guò)程，收集其中的信息，再來(lái)繪制canvas圖像，也就是說(shuō)，其實(shí)它并不是將展現(xiàn)的DOM樹(shù)截成canvas圖，而是仿照DOM樹(shù)重新繪制了一張canvas圖。于是很多CSS樣式都無(wú)法被準(zhǔn)確識(shí)別出來(lái)，無(wú)法準(zhǔn)確反映到圖上。

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

●javascript必須是同域的，對(duì)于跨域的情況需要使用代理服務(wù)器（API中有參數(shù)可以指定），對(duì)于image也同樣；
●frame內(nèi)的DOM樹(shù)無(wú)法被準(zhǔn)確繪制；
●因?yàn)橐L制的是canvas圖，所以像IE8這樣的瀏覽器需要使用FlashCanvas這樣的第三方庫(kù)。

這個(gè)頁(yè)面可以測(cè)試各個(gè)網(wǎng)站使用它來(lái)截圖的效果，效果相當(dāng)不錯(cuò)：

API使用的例子：

復(fù)制代碼 代碼如下:

html2canvas(
    [dom1, dom2],
    {
        logging: false,
        useCORS: false,
        proxy:   false,
        onrendered: function(canvas){
            // canvas 就是繪制的canvas是對(duì)象
        }
    }
);

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

另外，該站點(diǎn)下載包里面還有一個(gè)JQuery的插件，對(duì)這個(gè)API做了一個(gè)封裝，可以無(wú)視。

相關(guān)文章

最新評(píng)論