|
【Data URI 和 MHTML】
上面已經(jīng)多次提到Data URI，詳細介紹請看秦歌的“Data URI 和 MHTML”。
Data URI的主要作用是以字符代替數(shù)據(jù)，從而把文件“嵌”在代碼里。
除了ie，其他瀏覽器基本都很好的支持了Data URI。
ie8也有限度地支持，詳細參考msdn的data Protocol。
由于opera，safari和chrome需要remote模式的瀏覽器都支持Data URI，所以程序返回的是Data URI形式的數(shù)據(jù)。
相比返回路徑的方法，返回Data URI不需要創(chuàng)建文件，還少一次HTTP請求。
ps：ie8只支持32k的Data URI數(shù)據(jù)，在ie8使用時要注意數(shù)據(jù)大小。
在filter模式需要一個透明圖片來去掉img默認顯示的小圖標，一般的方法需要一個圖片文件。
為了“省下”這個文件，可以使用Data URI來做一個1*1的透明圖片：
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAA
LAAAAAABAAEAAAICRAEAOw==
支持Data URI的情況下，只要把img的src設(shè)置為這個值就可以顯示一個透明圖片了。
雖然ie6/7不支持Data URI，還可以用mhtml來代替。
在ImagePreviewd.js開頭有一段注釋了的代碼：
Content-Type: multipart/related; boundary="_CLOUDGAMER"
--_CLOUDGAMER
Content-Location:blankImage
Content-Transfer-Encoding:base64
R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEAAAIALA
AAAAABAAEAAAICVAEAOw==
這是mhtml記錄數(shù)據(jù)的形式，調(diào)用時要按以下格式設(shè)置img的src：
mhtml:文件完整路徑!blankImage
其中blankImage表示要獲取的數(shù)據(jù)在文件對應(yīng)的Content-Location。
問題在于如何獲得script（js文件）的完整路徑（包含http開頭的路徑）。
首先要在腳本運行時獲取，當前運行的script肯定是document.scripts的最后一個：
document.scripts[document.scripts.length - 1]
ps：document.scripts詳細參考msdn的scripts Collection，ff不支持，可以用getElementsByTagName("script")兼容。
接著可以利用getAttribute從src獲取script的完整路徑：
document.scripts[document.scripts.length - 1].getAttribute("src", 4)
ie6/7的getAttribute支持第二個參數(shù)，設(shè)為4表示返回完整路徑的url地址，詳細參考msdn的getAttribute Method。
結(jié)合Data URI 和 MHTML可以這樣得到透明圖片數(shù)據(jù)：
ImagePreview.TRANSPARENT = $$B.ie7 || $$B.ie6 ?
"mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage" :
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAA
AAALAAAAAABAAEAAAICRAEAOw==";
使用時要注意：
腳本必須單獨另存為一個文件，作為mhtml需要的文件路徑。
要自動獲取完整路徑需要用script標簽鏈接文件。
出處：藍色理想
責任編輯：bluehearts
上一頁 JavaScript 圖片預(yù)覽效果 [7] 下一頁 JavaScript 圖片預(yù)覽效果 [9]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 8 頁 JavaScript 圖片預(yù)覽效果 [8]
