【初心者向け】JavaScriptでBase64文字列をBlobに変換：サンプルコード付き

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

Base64 エンコーディングは、バイナリデータをテキスト形式に変換するために使用される手法です。これは、画像やその他のバイナリデータを送信または保存する必要がある場合に役立ちます。

JavaScript では、Blob オブジェクトを使用して Base64 文字列からバイナリデータを復元できます。 Blob オブジェクトは、ファイルやストリームなどのバイナリデータを表すために使用されます。

手順

Base64 文字列から Blob を作成するには、以下の手順に従います。

1. Base64 文字列をデコードする: atob() 関数を使用して、Base64 文字列をバイナリデータに変換します。
2. Uint8Arrayを作成する: デコードされたバイナリデータを渡して、Uint8Array オブジェクトを作成します。 Uint8Array は、8 ビットの符号なし整数で構成される配列です。
3. Blobを作成する: Uint8Array オブジェクトと、Blob の MIME タイプを指定して Blob コンストラクタを呼び出します。 MIME タイプは、Blob の内容を識別するために使用されます。

例

以下の例では、Base64 文字列から image/jpeg MIME タイプの Blob を作成する方法を示します。

const base64String = 'data:image/jpeg;base64,I....'; // Base64 文字列を置き換えます
const binaryData = atob(base64String.replace(/^data:image\/(png|jpeg);base64,/, ''));
const byteArray = new Uint8Array(binaryData.length);
for (let i = 0; i < binaryData.length; i++) {
  byteArray[i] = binaryData.charCodeAt(i);
}
const blob = new Blob([byteArray], { type: 'image/jpeg' });

補足

• 上記の例では、atob() 関数を使用して Base64 文字列をデコードしています。 atob() 関数は、非推奨になりつつあるため、代わりに window.atob() を使用する方がよい場合があります。
• Uint8Array オブジェクトは、ネイティブなバイナリデータ配列ではないことに注意してください。 Blob コンストラクタに渡す前に、Uint8Array オブジェクトをネイティブなバイナリデータに変換する必要があります。
• MIME タイプは、Blob の内容を正しく識別するために重要です。間違った MIME タイプを指定すると、ブラウザが Blob を正しく処理できない可能性があります。

応用例

• 画像を Base64 エンコーディングで保存または送信する
• Base64 エンコーディングされたデータを読み込んで処理する

サンプルコード：Base64 文字列から Image Blob を作成

const base64String = 'data:image/jpeg;base64,I....'; // サンプルの Base64 文字列を置き換えてください
const blob = createImageBlobFromBase64(base64String);

function createImageBlobFromBase64(base64String) {
  const binaryData = atob(base64String.replace(/^data:image\/(png|jpeg);base64,/, ''));
  const byteArray = new Uint8Array(binaryData.length);
  for (let i = 0; i < binaryData.length; i++) {
    byteArray[i] = binaryData.charCodeAt(i);
  }
  const blob = new Blob([byteArray], { type: 'image/jpeg' });
  return blob;
}

このコードの説明

1. まず、base64String 変数に Base64 文字列を格納します。
2. 次に、createImageBlobFromBase64 関数を作成します。この関数は、Base64 文字列を引数として受け取り、Image Blob を返します。
3. createImageBlobFromBase64 関数の中では、まず atob() 関数を使用して Base64 文字列をバイナリデータに変換します。
4. 次に、バイナリデータを Uint8Array オブジェクトに変換します。
5. 最後に、Uint8Array オブジェクトと image/jpeg MIME タイプを渡して Blob コンストラクタを呼び出し、Image Blob を作成します。
6. createImageBlobFromBase64 関数は、作成した Image Blob を返します。
7. 最後に、base64String 変数を createImageBlobFromBase64 関数に渡して、Image Blob を作成します。

使用方法

このコードを使用するには、以下の手順に従います。

1. サンプルコードをコピーして、JavaScript ファイルに保存します。
2. スクリプトを実行します。

実行結果

スクリプトが実行されると、Image Blob が作成されます。この Blob をを使用して、画像を表示したり、ファイルとして保存したりできます。

• このコードは、JPEG 画像のみを処理します。他の種類の画像を処理するには、MIME タイプを適切に変更する必要があります。
• このコードは、非同期処理を使用していません。同期処理を使用する場合は、Promise や async/await を使用する必要があります。

JavaScript で Base64 文字列から Blob を作成するその他の方法

FileReader API は、ファイルや Blob からデータを非同期に読み取るために使用できます。 Base64 文字列を Blob に変換するには、以下の手順に従います。

1. FileReader オブジェクトを作成します。
2. readAsDataURL() メソッドを使用して、Base64 文字列を渡します。
3. onload イベントリスナーを使用して、読み取りが完了したときに処理を実行します。
4. result プロパティから Base64 文字列を取得し、atob() 関数を使用してバイナリデータに変換します。

const base64String = 'data:image/jpeg;base64,I....'; // サンプルの Base64 文字列を置き換えてください
const reader = new FileReader();
reader.onload = function() {
  const binaryData = atob(reader.result.replace(/^data:image\/(png|jpeg);base64,/, ''));
  const byteArray = new Uint8Array(binaryData.length);
  for (let i = 0; i < binaryData.length; i++) {
    byteArray[i] = binaryData.charCodeAt(i);
  }
  const blob = new Blob([byteArray], { type: 'image/jpeg' });
  // Blob を処理する
};
reader.readAsDataURL(base64String);

1. Canvas 要素を作成します。
2. drawImage() メソッドを使用して、Base64 文字列を Canvas 要素に描画します。
3. toDataURL() メソッドを使用して、Canvas 要素を Base64 文字列に変換します。

const base64String = 'data:image/jpeg;base64,I....'; // サンプルの Base64 文字列を置き換えてください
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL('image/jpeg');
  const binaryData = atob(dataURL.replace(/^data:image\/(png|jpeg);base64,/, ''));
  const byteArray = new Uint8Array(binaryData.length);
  for (let i = 0; i < binaryData.length; i++) {
    byteArray[i] = binaryData.charCodeAt(i);
  }
  const blob = new Blob([byteArray], { type: 'image/jpeg' });
  // Blob を処理する
};
img.src = base64String;

ライブラリを使用する

Base64 文字列から Blob を作成するライブラリがいくつかあります。 人気のあるライブラリには、以下のものがあります。

1. ライブラリをインストールします。
2. ライブラリの API を使用して、Base64 文字列を Blob に変換します。

例（Base64 to Blob ライブラリを使用する場合）

const base64String = 'data:image/jpeg;base64,I....'; //