欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript使用Base64編碼和Blob對象加密圖像url地址

 更新時間：2023年12月16日 11:26:23   投稿：yin  
有時候會看到一些網(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)的示例代碼,

有時候會看到一些網(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!">

綜合以上三個步驟，我們就可以在瀏覽器中解析Base64編碼圖像。

到此這篇關(guān)于JavaScript使用Base64編碼和Blob對象加密圖像url地址的文章就介紹到這了,更多相關(guān)Js用Base64和Blob加密圖像url內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論