JavaScript實現(xiàn)網(wǎng)頁截圖功能
使用JavaScript截圖，這里我要推薦兩款開源組件：一個是Canvas2Image，它可以將Canvas繪圖編程PNG/JPEG/BMP的圖像；但是光有它還不夠，我們需要給任意DOM（至少是絕大部分）截圖，這就需要html2canvas，它可以將DOM對象轉(zhuǎn)換成一個canvas對象。兩者的功能結(jié)合起來，就可以把頁面上的DOM截圖成PNG或者JPEG圖像了，很酷。
Canvas2Image
它的原理是利用了HTML5的canvas對象提供了toDataURL()的API：
var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
這樣的結(jié)果是base64編碼的（事實上，image也可以通過這種方式以字符串的形式寫死到頁面上），所以我們還需要一個base64編解碼的lib。
但是目前的缺陷也有不少，比如目前Opera和Safari只支持PNG，F(xiàn)ireFox的支持性則好得多。
生成圖片有兩種方式寫入頁面，一種是生成一個圖片對象寫入頁面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.
這個方式調(diào)用會生成一個mimeType為“image/octet-stream”的數(shù)據(jù)流到瀏覽器，但是“保存”對話框無法識別出圖片適當?shù)暮缶Y名，默認保存的文件在FireFox下是“xxx.part”這種名字，這是令人遺憾的地方，但是似乎沒有什么好辦法解決。
html2canvas
它作用于DOM加載的過程，收集其中的信息，再來繪制canvas圖像，也就是說，其實它并不是將展現(xiàn)的DOM樹截成canvas圖，而是仿照DOM樹重新繪制了一張canvas圖。于是很多CSS樣式都無法被準確識別出來，無法準確反映到圖上。
其它的限制還有不少，比如：
●javascript必須是同域的，對于跨域的情況需要使用代理服務(wù)器（API中有參數(shù)可以指定），對于image也同樣；
●frame內(nèi)的DOM樹無法被準確繪制；
●因為要繪制的是canvas圖，所以像IE8這樣的瀏覽器需要使用FlashCanvas這樣的第三方庫。
這個頁面可以測試各個網(wǎng)站使用它來截圖的效果，效果相當不錯：
API使用的例子：
html2canvas(
[dom1, dom2],
{
logging: false,
useCORS: false,
proxy: false,
onrendered: function(canvas){
// canvas 就是繪制的canvas是對象
}
}
);
對于這一類相對小眾的類庫，文檔都是很差的，包括API的定義，需要閱讀源碼，代碼上寫得挺清楚的。
另外，該站點下載包里面還有一個JQuery的插件，對這個API做了一個封裝，可以無視。
相關(guān)文章
這篇文章主要介紹了JavaScript設(shè)計模式手寫示例，設(shè)計模式（Design pattern） 是解決軟件開發(fā)某些特定問題而提出的一些解決方案也可以理解成解決問題的一些思路。通過設(shè)計模式可以幫助我們增強代碼的可重用性、可擴充性、 可維護性、靈活性好2022-12-12
這篇文章主要介紹了十分鐘教你上手ES2020新特性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
javascript的動態(tài)加載、緩存、更新以及復(fù)用（一）
在做OA、MIS、ERP等信息管理類的項目,經(jīng)常會遇到引用很多js文件，這就需要用到動態(tài)加載、緩存、更新以及復(fù)用等技術(shù)，下面我們來討論下2014-06-06
JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)
發(fā)布訂閱是一種設(shè)計模式，EventHub可以被看作是一種Pub/Sub實現(xiàn)。本文就來講講如何利用eventHub發(fā)布訂閱寫一個事件監(jiān)聽函數(shù)，感興趣的可以了解一下2023-04-04
BootStrap glyphicons 字體圖標實現(xiàn)方法
字體圖標是在 Web 項目中使用的圖標字體。接下來通過本文給大家介紹BootStrap glyphicons 字體圖標實現(xiàn)方法，需要的朋友參考下2016-05-05
本篇文章主要介紹了微信小程序模擬 cookie的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
ES6是JavaScript語言的主要增強,允許我們編寫程序,ES6適用于復(fù)雜的應(yīng)用程序,盡管ES5和ES6在本質(zhì)上有一些相似之處,但它們之間也有許多不同之處,下面這篇文章主要給大家介紹了關(guān)于ES5和ES6區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了微信小程序+云開發(fā)實現(xiàn)歡迎登錄注冊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
TypeScript?是一種靜態(tài)類型的編程語言,它可以讓我們在編寫?JavaScript?代碼時,提前發(fā)現(xiàn)并避免一些潛在的錯誤,本文主要為大家介紹了TypeScript中never類型的妙用,感興趣的可以了解下2023-11-11
我們在學習JavaScript中，難免都會去網(wǎng)上查一些資料。也許偶爾就會遇到“事件委托”，但是，大多數(shù)時說的是“事件綁定”，對于“事件委托”，或是不提，或是淺嘗輒止。對于我這個比較好奇的人來說，實在很蛋疼。尤其是想更多的了解“事件委托”的時候。2015-06-06