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