JavaScript使用Base64編碼和Blob對象加密圖像url地址
更新時間：2023年12月16日 11:26:23 投稿：yin
有時候會看到一些網(wǎng)站的圖片src中是blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d,這樣的圖片加載怎么實現(xiàn)呢？本文講解在瀏覽器中JavaScript使用解析Base64編碼和Blob對象技術(shù)來實現(xiàn),下面是實現(xiàn)的步驟和相應(yīng)的示例代碼,
有時候會看到一些網(wǎng)站的圖片src中是blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d，這樣的圖片加載怎么實現(xiàn)呢？本文講解在瀏覽器中JavaScript使用解析Base64編碼和Blob對象技術(shù)來實現(xiàn)，下面是實現(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!">
綜合以上三個步驟，我們就可以在瀏覽器中解析Base64編碼圖像。
到此這篇關(guān)于JavaScript使用Base64編碼和Blob對象加密圖像url地址的文章就介紹到這了,更多相關(guān)Js用Base64和Blob加密圖像url內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了js+css3實現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
本篇文章通過前臺跨域請求處理以及后臺跨域的數(shù)據(jù)處理方式介紹，詳細(xì)分析了ajax跨域的問題，對此有需要的朋友學(xué)習(xí)下。2018-02-02
這篇文章主要介紹了js中this用法,實例分析了this指向windows、指向?qū)ο蠹案淖僼his指向的相關(guān)技巧,需要的朋友可以參考下2015-05-05
小程序?qū)崿F(xiàn)輪播每次顯示三條數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播每次顯示三條數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)雙人五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
應(yīng)項目之需求，需用JS操作XML文檔，遂上網(wǎng)查資料，感覺這篇文章還不錯，特轉(zhuǎn)載到此地，與大家共享！2009-07-07
小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案詳解
這篇文章主要介紹了小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案,為實現(xiàn)H5頁面到小程序的無縫切換,技術(shù)方案包含使用webview交互,特別是低碼C端表單頁面的處理,需要的朋友可以參考下2024-09-09
Bootstrap選項卡與Masonry插件的完美結(jié)合
這篇文章主要介紹了Bootstrap選項卡與Masonry插件的完美結(jié)合的相關(guān)資料,需要的朋友可以參考下2016-07-07
深入理解JavaScript系列（35）：設(shè)計模式之迭代器模式詳解
這篇文章主要介紹了深入理解JavaScript系列（35）：設(shè)計模式之迭代器模式詳解,迭代器模式(Iterator)：提供一種方法順序一個聚合對象中各個元素,而又不暴露該對象內(nèi)部表示,需要的朋友可以參考下2015-03-03
JavaScript電話號碼格式化的多種實現(xiàn)方式
本文希望通過一道簡單的題目,讓剛接觸JavaScript的新手們了解一個合格的前端程序員需要具備哪些素質(zhì),文章給大家介紹了JavaScript電話號碼格式化的多種實現(xiàn)方式,感興趣的小伙伴跟著小編一起來看看吧2024-11-11