js 顯示base64編碼的二進(jìn)制流網(wǎng)頁(yè)圖片
Data URI scheme。
Data URI scheme是在RFC2397中定義的，目的是將一些小的數(shù)據(jù)，直接嵌入到網(wǎng)頁(yè)中，從而不用再?gòu)耐獠课募d入。比如上面那串字符，其實(shí)是一張小圖片，將這些字符復(fù)制黏貼到火狐的地址欄中并轉(zhuǎn)到，就能看到它了，一張2*2的白色gif圖片。
在上面的Data URI中，data表示取得數(shù)據(jù)的協(xié)定名稱，image/gif是數(shù)據(jù)類型名稱，base64 是數(shù)據(jù)的編碼方法，逗號(hào)后面就是這個(gè)image/gif文件base64編碼后的數(shù)據(jù)。
目前，Data URI scheme支持的類型有：
data:,文本數(shù)據(jù)
data:text/plain,文本數(shù)據(jù)
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/javascript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)
base64簡(jiǎn)單地說，它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符，網(wǎng)上有很多免費(fèi)的base64 編碼和解碼的工具，在PHP中可以用函數(shù)base64_encode() 進(jìn)行編碼，如echo base64_encode(file_get_contents(‘images/log.gif”'));
目前，IE8、Firfox、Chrome、Opera瀏覽器都支持這種小文件嵌入。
舉個(gè)圖片的例子：
網(wǎng)頁(yè)中一張圖片可以這樣顯示：
<img src=“http://www.jwzzsw.com/images/log.gif”/>
也可以這樣顯示：
<img src=“data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs=”/>
我們把圖像文件的內(nèi)容直接寫在了HTML 文件中，這樣做的好處是，節(jié)省了一個(gè)HTTP 請(qǐng)求。壞處呢，就是瀏覽器不會(huì)緩存這種圖像。
PS：這里再為大家提供一款在線圖片轉(zhuǎn)base64編碼工具與base64編碼轉(zhuǎn)換工具供大家參考使用：
圖片轉(zhuǎn)換為Base64編碼在線工具：http://tools.jb51.net/transcoding/img2base64
BASE64編碼解碼工具：http://tools.jb51.net/transcoding/base64
相關(guān)文章
JavaScript實(shí)現(xiàn)瀑布流以及加載效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)瀑布流以及加載效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上拉加載功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
JS數(shù)組方法shift()、unshift()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法shift()、unshift()用法,結(jié)合實(shí)例形式分析了JavaScript數(shù)組shift()與unshift()方法功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
confirm的用法示例用于按鈕操作時(shí)確定是否執(zhí)行
這篇文章主要介紹了confirm的用法，confirm一般用于按鈕操作時(shí)確定是否執(zhí)行,需要的朋友可以參考下2014-06-06
javascript實(shí)現(xiàn)數(shù)組最大值和最小值的6種方法
比較數(shù)組中數(shù)值的大小是比較常見的操作，本文主要介紹了javascript實(shí)現(xiàn)數(shù)組最大值和最小值的6種方法，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Javascript的并行運(yùn)算實(shí)現(xiàn)代碼
隨著多核cpu的普級(jí),并發(fā)/并行多線程運(yùn)算在主流的編程語(yǔ)言越來越流行,而在目前Javascript實(shí)現(xiàn)中還看不到在語(yǔ)言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會(huì)在語(yǔ)言的層面有很大的變化.2010-11-11
詳解如何用JavaScript編寫一個(gè)單元測(cè)試
測(cè)試代碼是確保代碼穩(wěn)定的第一步。能做到這一點(diǎn)的最佳方法之一就是使用單元測(cè)試。這篇文章主要介紹了如何用JavaScript編寫你的第一個(gè)單元測(cè)試，感興趣的可以了解一下2022-11-11
javascript?中動(dòng)畫制作方法?animate()屬性
這篇文章主要介紹了javascript?中動(dòng)畫制作方法?animate()屬性，animate是所有dom元素都有的方法，可以用來最做過度動(dòng)畫，關(guān)鍵幀動(dòng)畫，下面文章的相關(guān)介紹需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了理解JavaScript單一職責(zé)原則，單一職責(zé)原則（SRP：Single?responsibility?principle）又稱單一功能原則，面向?qū)ο笪鍌€(gè)基本原則（SOLID）之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-08-08
微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級(jí)限制問題小結(jié)
在微信小程序開發(fā)中,wx.navigateTo和wx.redirectTo是兩種頁(yè)面跳轉(zhuǎn)方式,wx.navigateTo允許跳轉(zhuǎn)到新頁(yè)面并保留當(dāng)前頁(yè)面,適合需要返回的場(chǎng)景,但受頁(yè)面棧10層限制,wx.redirectTo則關(guān)閉當(dāng)前頁(yè)面后跳轉(zhuǎn),本文介紹微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級(jí)限制問題2024-10-10