JavaScript で Base64 データを BLOB に効率的にデコードするにはどうすればよいですか?

Base64 データを BLOB にデコードする: JavaScript 開発者のための包括的なガイド

JavaScript では、base64 でエンコードされたバイナリ データを操作するのが一般的なタスクです。このデータをユーザーに表示するには、多くの場合、Blob オブジェクトを作成する必要があります。この記事では、base64 データを BLOB にデコードする方法に関する完全なガイドを提供し、法外に大きなデータ URL を処理するという特有の課題に対処します。

Base64 をバイト配列に変換する

base64 文字列をデコードするにはバイナリデータに変換するには、atob 関数を利用できます。エンコードされたデータのバイトごとに 1 文字を含む新しい文字列を返します。

これらの文字を対応するバイト値に変換するには、charCodeAt メソッドを使用して各文字を反復処理し、結果としてバイト番号の配列が得られます。

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

型付きバイト配列の作成

Uint8Array コンストラクターを使用して、バイト数値配列を、基になるバイナリ データを表す配列のようなオブジェクトである型付きバイト配列に変換します。

const byteArray = new Uint8Array(byteNumbers);

Blob への変換

最後に、型付きバイト配列をラップできます。配列内のバイト配列を Blob コンストラクターに渡して Blob を作成しますobject.

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

パフォーマンスの最適化

上記のコードは機能しますが、バイト文字を一度にすべて処理するのではなく、より小さなスライスで処理することでパフォーマンスを向上させることができます。

以下の b64toBlob 関数は、スライス サイズ 512 バイトでこの改善を示しています。これにより、メモリ使用量とメモリ使用量のバランスが適切になることがわかりました。パフォーマンス。

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

完全な例

b64toBlob の使用法を示すために、画像要素を作成し、そのソースを、base64 でエンコードされた画像から作成された Blob URL に設定できます。

const blob = b64toBlob(b64Data, 'image/png');
const blobUrl = URL.createObjectURL(blob);

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

これらの手順に従い、提供されたコード スニペットを利用することで、base64 データを Blob に効果的にデコードできます。オブジェクトを JavaScript で使用できるため、データ URL の制限を受けることなく、大きなバイナリ データをユーザーに表示できます。

以上がJavaScript で Base64 データを BLOB に効率的にデコードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。