JavaScriptでbase64文字列からBlobを作成する
2024-08-27
JavaScriptでは、base64エンコードされた文字列をBlob（バイナリデータオブジェクト）に変換することができます。Blobは、画像やファイルなどのバイナリデータを扱う際に便利です。
方法
- window.atob関数を使用する
atob関数を使用して、base64文字列をバイナリ文字列に変換します。- 変換されたバイナリ文字列をUint8Arrayオブジェクトに変換します。
- Uint8ArrayオブジェクトをBlobオブジェクトに変換します。
function base64ToBlob(base64Data) {
const binaryString = window.atob(base64Data);
const binaryArray = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
binaryArray[i] = binaryString.charCodeAt (i);
}
return new Blob([binaryArray], { type: 'image/png' }); // 適切なMIMEタイプを指定
}
- fetch APIを使用する
fetchAPIを使用して、base64文字列をBlobに変換します。fetchAPIのBlobオプションを使用して、Blobオブジェクトを作成します。
function base64ToBlob(base64Data) {
return fetch('data:image/png;base64,' + base64Data) // 適切なMIMEタイプを指定
.then(response => response.blob());
}
例
const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyseAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAAAAcAAAAASUX09AAAABJRU5ErkJggg==';
const blob = base64ToBlob(base64Image);
// blobをダウンロードしたり、他の処理に利用する
注意
fetchAPIを使用する場合は、ブラウザのサポート状況を確認してください。- Base64文字列が正しいエンコードであることを確認してください。
typeオプションは、BlobのMIMEタイプを指定します。適切なMIMEタイプを設定してください。
方法1: atob関数を使用する
function base64ToBlob(base64Data) {
const binaryString = window.atob(base64Data);
const binaryArray = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
binaryArray[i] = binaryString.charCodeAt (i);
}
return new Blob([binaryArray], { type: 'image/png' }); // 適切なMIMEタイプを指定
}
解説
typeオプションでBlobのMIMEタイプを指定します。
方法2: fetch APIを使用する
function base64ToBlob(base64Data) {
return fetch('data:image/png;base64,' + base64Data) // 適切なMIMEタイプを指定
.then(response => response.blob());
}
const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyseAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAAAAcAAAAASUX09AAAABJRU5ErkJggg==';
const blob = base64ToBlob(base64Image);
// blobをダウンロードしたり、他の処理に利用する
- base64エンコードされた画像データを定義します。
base64ToBlob関数を使用して、Blobオブジェクトを作成します。- 作成されたBlobオブジェクトをダウンロードしたり、他の処理に利用します。
FileReader APIを使用する
function base64ToBlob(base64Data) {
const binaryString = window.atob(base64Data);
const binaryArray = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
binaryArray[i] = binaryString.charCodeAt (i);
}
const blob = new Blob([binaryArray], { type: 'image/png' }); // 適切なMIMEタイプを指定
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataUR L(blob);
});
}
- Promiseを使用して、非同期処理を管理します。
- FileReader APIを使用して、BlobオブジェクトをデータURLに変換します。
BlobBuilder APIを使用する（非推奨）
function base64ToBlob(base64Data) {
const binaryString = window.atob(base64Data);
const binaryArray = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
binaryArray[i] = binaryString.charCodeAt (i);
}
const bb = new BlobBuilder();
bb.append(binaryArray.buffer);
return bb.getBlob('image/png'); // 適切なMIMEタイプを指定
}
- BlobBuilder APIは、現在は非推奨となっているため、新しいプロジェクトでは使用しないことを推奨します。
- BlobBuilder APIを使用して、Blobオブジェクトを作成します。
javascript base64
