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