如何在 JavaScript 中將 Base64 字串轉換為 Blob？

在JavaScript 中從Base64 字串建立Blob

使用編碼為Base64 字串的二進位資料時，可能需要轉換將其轉換為Blob 物件。這對於在網頁瀏覽器中顯示資料或將其儲存到使用者的裝置非常有用。

解碼 Base64 字串

第一步是解碼 Base64字串轉換為位元組字元的字串。這可以使用 atob 函數來實現。

const byteCharacters = atob(b64Data);

將位元組字元轉換為位元組數組

接下來，我們需要將將位元組字元轉換為實際類型的位元組數組。這可以透過將位元組字元傳遞給 Uint8Array 建構子來完成。

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

const byteArray = new Uint8Array(byteNumbers);

建立Blob 物件

最後，我們可以包裝陣列中的位元組陣列並將其傳遞給Blob 建構函式以創建Blob object.

const blob = new Blob([byteArray], {type: contentType});

效能最佳化

上面的程式碼可以工作，但是可以透過處理較小切片中的位元組字元來提高其效能。 512 位元組的切片大小通常是一個不錯的選擇。

範例函數

以下是使用最佳化方法將Base64 字串轉換為Blob 物件的函數：

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
    
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
};

用法範例

要使用函數，只需傳遞base64字串和內容類型作為參數即可。

const blob = b64toBlob(b64Data, contentType);

產生的 Blob 物件可用於建立映像或下載資料。

以上是如何在 JavaScript 中將 Base64 字串轉換為 Blob？的詳細內容。更多資訊請關注PHP中文網其他相關文章！