JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで画像をBase64文字列に変換する方法【サンプルコード付き】

JavaScriptを使って画像をBase64文字列に変換するには、FileReader APIを利用するのが一般的です。FileReader APIは、ファイルやBlobデータを読み込み、Data URL形式（Base64エンコードされた文字列）として取得できる便利な機能です。

以下では、XMLHttpRequestで画像データをBlob形式で取得し、FileReaderのreadAsDataURL()メソッドを使ってBase64文字列に変換する例を紹介します。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <script>
         function toDataURL(url, callback) {
            var httpRequest = new XMLHttpRequest();
            httpRequest.onload = function() {
               var fileReader = new FileReader();
                  fileReader.onloadend = function() {
                     callback(fileReader.result);
                  }
                  fileReader.readAsDataURL(httpRequest.response);
            };
            httpRequest.open('GET', url);
            httpRequest.responseType = 'blob';
            httpRequest.send();
         }
         toDataURL('https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg', function(dataUrl) {
         document.write('Result in string:', dataUrl)
      })
      </script>
   </body>
</html>

コードの解説

このサンプルコードの処理の流れは以下のとおりです。

1. 画像データの取得： XMLHttpRequestを使って指定したURLから画像を取得します。このとき、responseTypeに'blob'を設定することで、レスポンスをBlobオブジェクトとして受け取れます。

2. Base64への変換： 取得したBlobをFileReaderのreadAsDataURL()メソッドに渡すことで、Data URL形式（先頭にdata:image/jpeg;base64,などが付いたBase64文字列）に変換されます。

3. 結果の取得： 読み込みが完了するとonloadendイベントが発生し、fileReader.resultから変換後のBase64文字列を取得してコールバック関数に渡します。

補足：モダンな書き方

最近のブラウザでは、fetch APIとBlobを組み合わせることで、より簡潔に記述することもできます。

async function toDataURL(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

この方法なら、コールバック地獄を避けてPromiseベースで処理を書けるため、可読性が向上します。用途や対応ブラウザに応じて使い分けるとよいでしょう。

  1. JavaScriptで画像をBlobに変換する方法【サンプルコード＆解説つき】

    JavaScriptで画像をBlobに変換するには？Webアプリケーション開発では、画像などのファイルデータを「Blob（Binary Large Object：バイナリラージオブジェクト）」として扱いたい場面が多くあります。たとえば、画像のアップロード処理やCanvasへの描画、サーバーへのデータ送信などがその代表例です。JavaScriptでは、fetch()メソッドとBlobオブジェクトを組み合わせることで、URLから取得した画像を簡単にBlobへ変換できます。以下に実際のサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang=&q

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum