JavaScript實(shí)現(xiàn)網(wǎng)頁截圖功能
使用JavaScript截圖,這里我要推薦兩款開源組件:一個(gè)是Canvas2Image,它可以將Canvas繪圖編程PNG/JPEG/BMP的圖像;但是光有它還不夠,我們需要給任意DOM(至少是絕大部分)截圖,這就需要html2canvas,它可以將DOM對(duì)象轉(zhuǎn)換成一個(gè)canvas對(duì)象。兩者的功能結(jié)合起來,就可以把頁面上的DOM截圖成PNG或者JPEG圖像了,很酷。
Canvas2Image
它的原理是利用了HTML5的canvas對(duì)象提供了toDataURL()的API:
var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
這樣的結(jié)果是base64編碼的(事實(shí)上,image也可以通過這種方式以字符串的形式寫死到頁面上),所以我們還需要一個(gè)base64編解碼的lib。
但是目前的缺陷也有不少,比如目前Opera和Safari只支持PNG,F(xiàn)ireFox的支持性則好得多。
生成圖片有兩種方式寫入頁面,一種是生成一個(gè)圖片對(duì)象寫入頁面DOM樹中,這也是支持性比較好的方式:
// returns an <img> element containing the converted PNG image
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);
但是如果你做一個(gè)JavaScript截圖功能的話,你可能希望截圖后能夠自動(dòng)打開保存文件的“保存”對(duì)話框:
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ì)話框無法識(shí)別出圖片適當(dāng)?shù)暮缶Y名,默認(rèn)保存的文件在FireFox下是“xxx.part”這種名字,這是令人遺憾的地方,但是似乎沒有什么好辦法解決。
html2canvas
它作用于DOM加載的過程,收集其中的信息,再來繪制canvas圖像,也就是說,其實(shí)它并不是將展現(xiàn)的DOM樹截成canvas圖,而是仿照DOM樹重新繪制了一張canvas圖。于是很多CSS樣式都無法被準(zhǔn)確識(shí)別出來,無法準(zhǔn)確反映到圖上。
其它的限制還有不少,比如:
●javascript必須是同域的,對(duì)于跨域的情況需要使用代理服務(wù)器(API中有參數(shù)可以指定),對(duì)于image也同樣;
●frame內(nèi)的DOM樹無法被準(zhǔn)確繪制;
●因?yàn)橐L制的是canvas圖,所以像IE8這樣的瀏覽器需要使用FlashCanvas這樣的第三方庫。
這個(gè)頁面可以測(cè)試各個(gè)網(wǎng)站使用它來截圖的效果,效果相當(dāng)不錯(cuò):
API使用的例子:
html2canvas(
[dom1, dom2],
{
logging: false,
useCORS: false,
proxy: false,
onrendered: function(canvas){
// canvas 就是繪制的canvas是對(duì)象
}
}
);
對(duì)于這一類相對(duì)小眾的類庫,文檔都是很差的,包括API的定義,需要閱讀源碼,代碼上寫得挺清楚的。
另外,該站點(diǎn)下載包里面還有一個(gè)JQuery的插件,對(duì)這個(gè)API做了一個(gè)封裝,可以無視。
相關(guān)文章
javascript的動(dòng)態(tài)加載、緩存、更新以及復(fù)用(一)
在做OA、MIS、ERP等信息管理類的項(xiàng)目,經(jīng)常會(huì)遇到引用很多js文件,這就需要用到動(dòng)態(tài)加載、緩存、更新以及復(fù)用等技術(shù),下面我們來討論下2014-06-06JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)
發(fā)布訂閱是一種設(shè)計(jì)模式,EventHub可以被看作是一種Pub/Sub實(shí)現(xiàn)。本文就來講講如何利用eventHub發(fā)布訂閱寫一個(gè)事件監(jiān)聽函數(shù),感興趣的可以了解一下2023-04-04BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法
字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。接下來通過本文給大家介紹BootStrap glyphicons 字體圖標(biāo)實(shí)現(xiàn)方法,需要的朋友參考下2016-05-05微信小程序+云開發(fā)實(shí)現(xiàn)歡迎登錄注冊(cè)
這篇文章主要介紹了微信小程序+云開發(fā)實(shí)現(xiàn)歡迎登錄注冊(cè),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05