JavaScript で Base64 文字列から BLOB を作成する方法

JavaScript で Base64 文字列から BLOB を作成する

問題

文字列内に Base64 でエンコードされたバイナリ データがあり、このデータを含む BLOB URL を作成し、ユーザーに表示します。具体的には、以下のコード スニペットに示すように、目標は Base64 文字列から Blob オブジェクトを作成することです。

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

解決策

Base64 文字列を Blob オブジェクトにデコードするにはJavaScript の場合は、次の手順に従います:

1. base64 をデコードします。 data: atob 関数を使用して、base64 文字列を文字列にデコードします:

   const byteCharacters = atob(b64Data);

2. バイト文字をバイト値に変換します: 配列を作成しますバイト値の各文字の文字コード ポイント (charCode) を取得します。文字列:

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

3. 型付きバイト配列の作成: Uint8Array コンストラクターを使用して、バイト値を実際の型付きバイト配列に変換します:

   const byteArray = new Uint8Array(byteNumbers);

4. 配列でラップするそして、Blob を作成します: バイト配列を配列でラップし、Blob コンストラクターに渡すことで Blob オブジェクトを作成します:

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

パフォーマンスの最適化

上記のコードは完全に機能しますが、バイト文字をより小さなチャンクにスライスしてから実行することでパフォーマンスを向上させることができます。

完全な例

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;
};

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

以上がJavaScript で Base64 文字列から BLOB を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。