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

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

base64 でエンコードされた文字列を Blob オブジェクトに変換することは、バイナリ データを扱う場合の JavaScript の一般的なタスクです。これは、データを画像として表示したり、ユーザーのデバイスにダウンロードしたりする場合に便利です。

Base64 文字列のデコード

最初のステップは、base64 文字列をデコードすることです。これは、base64 でエンコードされた文字列を、元のバイナリ データを含む新しい文字列に変換する atob 関数を使用して実現できます。

const byteCharacters = atob(b64Data);

型付きバイト配列への変換

atob 関数それぞれがバイトを表す文字列が生成されます。これらの文字を実際のバイトに変換するには、.charCodeAt メソッドを使用して文字コード ポイントを取得します。これらのコード ポイントはバイトの値になります。

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

次に、byteNumbers 配列をコンストラクターに渡すことで、Uint8Array を作成できます。

const byteArray = new Uint8Array(byteNumbers);

Blob の作成

最後に、byteArray を配列でラップし、それをBLOB コンストラクター。

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

例

base64 文字列から BLOB を作成する方法の例を次に示します。

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

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

Blob を作成したら、これを使用して、データをユーザーに表示したり、デバイスにダウンロードしたりできます。 URL.createObjectURL 関数を使用して BLOB の URL を作成し、画像の src またはダウンロード リンクの href として設定できます。

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