JavaScriptで画像ファイルをbase64文字列に変換する方法！

JavaScript
2022.01.31

今回はWebフォームで画像ファイルを選択した後に、JavaScriptを使用してBase64形式に変換する方法を書いています。
実際に画像をフォームに設定して変換する、簡単なサンプルを作ってみました。

JavaScriptで画像をbase64文字列にするには？

フォームからinputタグでファイルを選択すると、Fileオブジェクトの形式で取り出すことができます。
その後にFileReaderオブジェクトを使用すると変換することが可能です。

実際の処理を見ていきましょう。

画像をbase64文字列に変換するサンプルコード

画像選択するためのinputタグと、変換を実行するボタンを用意しました。
変換後にテキストエリアにbase64文字列を表示して、実際の画像をdivタグの中に展開しています。

画面としては、このような感じになります。
JavaScriptで画像をbase64文字列変換するサンプル画面

次にソースコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>base64 image</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script>
      function changeImageToBase64() {
        const uploadImage = document.querySelector('#uploadImage')
        const file = uploadImage.files[0]

        const reader = new FileReader()
        reader.onload = (event) => {
          const base64Text = event.currentTarget.result

          document.querySelector('#base64text').value = base64Text
          document.querySelector('#uploadImageArea').innerHTML = `<img src="${base64Text}" width="100%" />`
        }
        reader.readAsDataURL(file)
      }
    </script>
  </head>
  <body>
    <nav class="navbar navbar-dark bg-dark mb-3">
      <a class="navbar-brand ms-3" href="#">JavaScript: image to Base64</a>
    </nav>
    <div class="container">
      <form>
        <div class="mb-3 d-flex">
          <input type="file" class="form-control me-2" id="uploadImage" />
          <button type="button" class="btn btn-primary form-control w-25" onclick="changeImageToBase64()">base64へ変換</button>
        </div>
        <textarea id="base64text" class="form-control mb-3" rows="6"></textarea>
        <div id="uploadImageArea"></div>
      </form>
    </div>
  </body>
</html>

bootstrap5で見栄えを整えています。
ボタンを押したときに、自作したchangeImageToBase64関数が動いて処理を行います。

実際に処理をするchangeImageToBase64関数を確認してみます。

画像を変換する関数の解説

最初にquerySelectorを使用して、inputタグに設定されたファイルを取得します。
その後にfile変数に取得したファイルを設定しています。

const uploadImage = document.querySelector('#uploadImage')
const file = uploadImage.files[0]

次にFileReaderオブジェクトを作成して、reader変数に設定しています。
FileReaderはファイルの内容を非同期に読み取ることができる機能です。

const reader = new FileReader()

そしてreader.onloadに関数を設定しています。

reader.onload = (event) => {
  // 非同期で処理を行った後に実行される
}

これは非同期にファイルの内容を読み取った後に、コールバックで処理される関数になります。
コールバック処理の中身は後で、確認します。

最後にFileReaderオブジェクトのreadAsDataURLメソッドを使用しています。
readAsDataURLに取得したFileオブジェクトを渡すことで、読み込み処理が始まって、終わるとonloadに設定した関数が実行されます。

reader.readAsDataURL(file)

ファイル読み込み処理が終わった時に実行されるonloadのコールバック関数です。

reader.onload = (event) => {
    const base64Text = event.currentTarget.result

    document.querySelector('#base64text').value = base64Text
    document.querySelector('#uploadImageArea').innerHTML = `<img src="${base64Text}" width="100%" />`
}

引数のevent変数はProgressEventオブジェクトになります。
この引数のevent.currentTarget.resultにbase64文字列が入っています。

base64Text変数で内容を取得した後に、テキストエリア(‘#base64text’)に値を設定しています。
その後にdivタグ(‘#uploadImageArea’)の中にimgタグで画像を設定しています。

動作を確認する

実際に画像を設定して、変換ボタンを押すと下記のようになります。

JavaScriptで画像をbase64文字列への変換結果

設定した画像が非同期で読み込まれた後に、base64文字列になってテキストエリアに設定されて、画像も表示されました！

MIMEタイプを消して、データのみ取得する

変換結果として、下記の形で結果が返ってきています。
imgタグに設定できる、MIMEタイプが付いた形式ですね。

data:image/png;base64,iVBORw0KGgoAAAANSUhE...省略...

このbase64文字列をバックエンドに送って保存したい場合には、MIMEタイプなどの情報が不要になることがあります。
その場合には単純に「,」でsplitしてデータ本体のみを取り出してあげると良いです。

先ほどのサンプルコードの例でいうと、下記のようになります。

event.currentTarget.result.split(',')[1]

コメント

タイトルとURLをコピーしました