JavaScript使用Base64編碼和Blob對象加密圖像url地址
有時(shí)候會看到一些網(wǎng)站的圖片src中是blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d，這樣的圖片加載怎么實(shí)現(xiàn)呢？本文講解在瀏覽器中JavaScript使用解析Base64編碼和Blob對象技術(shù)來實(shí)現(xiàn)，下面是實(shí)現(xiàn)的步驟和相應(yīng)的示例代碼。
1. 將Base64編碼字符串轉(zhuǎn)換為Blob對象
使用atob()函數(shù)將Base64編碼字符串轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)，然后將其轉(zhuǎn)換為Blob對象。
// 示例1：將Base64編碼字符串轉(zhuǎn)換為Blob對象
const base64 = 'data:image/png;base64,iVBORw0KG...';
const byteCharacters = atob(base64.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' });
2. 將Blob對象轉(zhuǎn)換為URL地址
使用createObjectURL()函數(shù)將Blob對象轉(zhuǎn)換為URL地址。
// 示例2：將Blob對象轉(zhuǎn)換為URL地址
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url); // 輸出blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d
3. 使用URL地址顯示圖像
將URL地址放置在img標(biāo)簽的src屬性中，即可在瀏覽器中顯示圖像。
<!-- 示例3：使用URL地址顯示圖像 --> <img src="blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d" alt="Hello, World!">
綜合以上三個(gè)步驟，我們就可以在瀏覽器中解析Base64編碼圖像。
到此這篇關(guān)于JavaScript使用Base64編碼和Blob對象加密圖像url地址的文章就介紹到這了,更多相關(guān)Js用Base64和Blob加密圖像url內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
bootstrapvalidator之API學(xué)習(xí)教程
這篇文章為大家分享了bootstrapvalidator之API學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript中Function與Object的關(guān)系
本文主要介紹了JavaScript中Function與Object的關(guān)系，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
微信小程序路由跳轉(zhuǎn)功能實(shí)現(xiàn)
本文介紹了微信小程序路由跳轉(zhuǎn)方法,包括wx.switchTab實(shí)現(xiàn)底部導(dǎo)航欄和wx.navigateTo跳轉(zhuǎn)非底部頁面,需配置pages數(shù)組及自定義tab-bar組件,感興趣的朋友一起看看吧2025-06-06
詳細(xì)聊聊JavaScript是如何影響DOM樹構(gòu)建的
DOM (Document Object Model) 的全稱是文檔對象模型,它可以以一種獨(dú)立于平臺和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于JavaScript是如何影響DOM樹構(gòu)建的相關(guān)資料,需要的朋友可以參考下2021-08-08
微信小程序?qū)腠?xiàng)目后報(bào)錯找不到app.json簡單解決辦法
微信小程序的全局配置保存在app.json文件中,這篇文章主要介紹了微信小程序?qū)腠?xiàng)目后報(bào)錯找不到app.json簡單的解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互
這篇文章主要介紹了用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互2006-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單隨機(jī)3D骰子，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
javascript canvas API內(nèi)容整理
在本篇文章里小編給大家分享的是關(guān)于javascript canvas API內(nèi)容整理，有需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
flash 得到自身url參數(shù)的代碼，需要的朋友可以參考下。2009-11-11
avaScript基礎(chǔ)學(xué)習(xí)-基本的語法規(guī)則
這篇文章主要介紹了avaScript的語法規(guī)則，本文的語法講解主要講一下與其他語言的區(qū)別，下面詳細(xì)的介紹內(nèi)容，需要的小伙伴可以參考一下，希望對你有所幫助2022-02-02