FileReader API でサクッと変換

2024-04-18

ここでは、JavaScript と jQuery を使って Blob を Base64 に変換する方法を 2 通りご紹介します。

FileReader API を使用する

FileReader API は、Blob や File オブジェクトからデータを読み取るための API です。この API を使用して、Blob を Base64 文字列に変換することができます。

const blob = new Blob(['Hello, world!'], {type: 'text/plain'});

const reader = new FileReader();
reader.onload = function(event) {
  const base64 = event.target.result;
  console.log(base64); // 結果: data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==
};
reader.readAsDataURL(blob);

このコードでは、まず Blob オブジェクトを作成します。次に、FileReader オブジェクトを作成し、readAsDataURL() メソッドを使用して Blob を Data URL 形式に変換します。Data URL 形式は、Base64 エンコードされたデータと MIME タイプを含む文字列です。

onload イベントハンドラ内で、event.target.result プロパティから Base64 文字列を取得することができます。

jQuery を使用すると、FileReader API をより簡単に操作することができます。

$.ajax({
  url: 'image.png',
  dataType: 'blob'
}).then(function(blob) {
  const base64 = $.base64.encode(blob);
  console.log(base64);
});

このコードでは、jQuery の ajax() メソッドを使用して画像ファイルを非同期的に読み込みます。dataType: 'blob' オプションを指定することで、レスポンスを Blob オブジェクトとして取得します。

その後、$.base64.encode() メソッドを使用して Blob を Base64 文字列に変換します。

補足

上記のコード例では、デモ目的の短いデータを使用しています。実際のファイルを読み込む場合は、適切なエラー処理を実装する必要があります。
Base64 エンコードされたデータは、URL やフォームデータとして送信することができます。
Base64 デコードされたデータは、Blob オブジェクトに戻すことができます。

サンプルコード - JavaScript & jQuery で Blob を Base64 に変換

const blob = new Blob(['Hello, world!'], {type: 'text/plain'});

const reader = new FileReader();
reader.onload = function(event) {
  const base64 = event.target.result;
  console.log(base64); // 結果: data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==
};
reader.readAsDataURL(blob);

jQuery を使用する

$.ajax({
  url: 'image.png',
  dataType: 'blob'
}).then(function(blob) {
  const base64 = $.base64.encode(blob);
  console.log(base64);
});

説明

FileReader API を使用する
- Blob オブジェクトを作成します。
- readAsDataURL() メソッドを使用して Blob を Data URL 形式に変換します。
- onload イベントハンドラ内で、Base64 文字列を取得します。
jQuery を使用する
- ajax() メソッドを使用して画像ファイルを非同期的に読み込みます。
- dataType: 'blob' オプションでレスポンスを Blob オブジェクトとして取得します。

上記のコードはあくまでサンプルです。実際の使用状況に合わせて調整してください。
ファイルの種類やサイズによっては、処理時間がかかる場合があります。

Blob を Base64 に変換するその他の方法

Canvas API は、Web ページ上で画像を描画するための API です。この API を使用して、Blob から画像データを取得し、Base64 エンコードすることができます。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const blob = new Blob(['Hello, world!'], {type: 'text/plain'});
const reader = new FileReader();
reader.onload = function(event) {
  const imageData = new ImageData(event.target.result);
  canvas.width = imageData.width;
  canvas.height = imageData.height;
  ctx.putImageData(imageData, 0, 0);

  const base64 = canvas.toDataURL('image/png');
  console.log(base64); // 結果: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9A ...
};
reader.readAsArrayBuffer(blob);