JavaScriptで画像をBase64文字列に変換する方法

Base64は、バイナリデータをテキスト形式に変換するエンコーディング方式です。画像ファイルもバイナリデータなので、Base64に変換することで、テキスト形式で扱えるようになります。

基本的な手順

1. 画像ファイルを取得する
   

   • FileReaderオブジェクトを使用します。
   • FileReader.readAsDataURL()メソッドで、画像ファイルをデータURLに変換します。

2. データURLからBase64文字列を抽出する
   

   • データURLは、data:image/jpeg;base64,のような形式になっています。
   • data:以降の部分がBase64文字列です。

コード例

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (event) => {
      const base64String = event.target.result   .replace(/^data:image\/(png|jpeg|jpg);base64,/, '');
      resolve(base64String);
    };

    reader.onerror = (error) => {
      reject(error);
    };

    reader.readAsDataURL(file);
  });
}

const imageFile = document.getElementById('imageInput').files[0];
imageToBase64(imageFile).then((base64String) => {
  console.log(base64String);
  // Base64文字列を必要に応じて使用
}).catch((error) => {
  console.error(error);
});

重要なポイント

• replace()メソッドを使用して、データURLの先頭部分 (data:image/jpeg;base64,) を削除することで、純粋なBase64文字列を取得しています。
• FileReaderオブジェクトは非同期処理なので、Promiseやasync/awaitを使用して結果を処理する必要があります。

応用例

• Base64文字列をHTMLの<img>タグのsrc属性に設定することで、直接画像を表示することができます。
• 画像をサーバーに送信する際、Base64文字列を使用すると、バイナリデータとして扱う必要がなくなります。

コード例の説明

imageToBase64関数

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (event) => {
      const base64String = event.target.result   .replace(/^data:image\/(png|jpeg|jpg);base64,/, '');
      resolve(base64String);
    };

    reader.onerror = (error) => {
      reject(error);
    };

    reader.readAsDataURL(file);
  });
}

• reject()関数
  Promiseを拒否し、エラーを返します。
• onerrorイベントハンドラー
  ファイルの読み込みにエラーが発生したときに実行されます。
• resolve()関数
  Promiseを解決し、Base64文字列を返します。
• replace()メソッド
  データURLの先頭部分を削除して、純粋なBase64文字列を取得します。
• event.target.result
  読み込まれたデータURLを取得します。
• FileReaderオブジェクト
  ファイルを読み込むためのオブジェクトです。
• Promise
  非同期処理を扱うためのオブジェクトです。
• imageToBase64関数
  画像ファイルを受け取り、Base64文字列に変換して返します。

画像ファイルの取得と変換

const imageFile = document.getElementById('imageInput').files[0];
imageToBase64(imageFile).then((base64String) => {
  console.log(base64String);
  // Base64文字列を必要に応じて使用
}).catch((error) => {
  console.error(error);
});

• .catch()メソッド
  Promiseが拒否された場合に実行されるコールバック関数です。
• document.getElementById('imageInput').files[0]
  HTMLの<input type="file">要素から選択された最初の画像ファイルを取得します。

このコードでは、ユーザーが選択した画像ファイルを読み込み、imageToBase64関数を使用してBase64文字列に変換しています。その後、変換されたBase64文字列をコンソールに表示しています。

Canvas APIを利用する

• canvas要素のtoDataURL()メソッドを使用して、画像をBase64文字列に変換します。
• canvas要素を作成し、画像をその要素に描画します。

function imageToBase64Canvas(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = ca   nvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      resolve(canvas.toDataURL());
    };
    i   mg.onerror = reject;
    img.src = URL.createObjectURL(file);
  });
}

Blob APIを利用する

• BlobオブジェクトのarrayBuffer()メソッドでバイナリデータを取得し、btoa()関数でBase64文字列に変換します。
• FileReaderオブジェクトを使用して、画像ファイルをBlobオブジェクトに変換します。

function imageToBase64Blob(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const blob = new Blob([reader.result]);
      blob.arrayBuffer().then((buffer) => {
        resolve(btoa(String.fromCharCode.apply(null, new Uint8Array(buffer))));
      }).catch(reject);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

外部ライブラリーを利用する

• image-to-base64などのライブラリーを使用すると、より簡潔なコードで画像をBase64文字列に変換できます。

import imageToBase64 from 'image-to-base64';

function imageToBase64Library(file) {
  return imageToBase64(file);
}

これらの代替方法の選択は、プロジェクトの要件やパフォーマンスの考慮事項に基づいて決定してください。

• 外部ライブラリー
  簡潔なコードで画像をBase64文字列に変換したい場合に適しています。
• Blob API
  より直接的なバイナリ操作が必要な場合に適しています。
• Canvas API
  画像の処理や編集が頻繁に行われる場合に適しています。