JavaScript で Base64 文字列を BLOB に変換するにはどうすればよいですか?

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

base64 文字列としてエンコードされたバイナリ データを扱う場合、変換が必要になる場合があります。それを Blob オブジェクトに変換します。これは、Web ブラウザでデータを表示したり、ユーザーのデバイスにデータを保存したりする場合に役立ちます。

Base64 文字列のデコード

最初のステップは、base64 をデコードすることです。 string をバイト文字の文字列に変換します。これは、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 に渡します

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 中国語 Web サイトの他の関連記事を参照してください。