🍣
アップロードした画像をBASE64で保存する

2025/06/21に公開
ゲームとかでキャラメイクする機能があって、キャラ画像をアップして設定できないだろうか。

Plicyのようなブラウザゲーム、DLして遊ぶRPGツクールMZみたいなものを想定します。

（WEBサーバならファイル保存すればよいと思います。名前が被らないようにする方が課題。）

こういうゲーム環境ではファイルとして保存するのは難しいと思うので、BASE64にします。

どちらもHTML表示ができるので、まずは画像データを何とかして覚えておくが目標。

※ ツクールとして反映するには別のテクニックが必要で、私は今は持ってません・・・。
今回考えた事：

アップロードした画像をBASE64の形で保存したい。

BASE64にしておけば、localStorageとかで保存して再アクセスの時も使えるだろうと。
結論は「FileReader.readAsDataURL()」です。

https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL

 たいして苦労なくできました苦労しなかったのは、アップロードされたファイルを

FileReaderでreadAsDataURLすれば、「e.target.result」がすでにBASE64でした。
参考にしたサイト：

https://catnose.me/learning/html/input-file
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="data:,">
  </head>
  <body>
    <form name="form" class="form" action="#">
      <label for="input">ファイル添付</label>
      <input type="file" class="input" />
    </form>
    <div id="preview"></div>
  </body>
  <script>
// クラスで探す
const input = document.querySelector(".input");

const refrectImg = (img) => {
  let p = document.getElementById("preview");
  p.innerHTML = "";
  p.appendChild(img);
}

input.addEventListener("change", (e) => {
  let files = input.files;
  // FileReaderオブジェクトを作成
  const reader = new FileReader();
  // URLとして読み込まれたときに実行する処理
  reader.onload = function (e) {
    const imageUrl = e.target.result;
    //console.log("imageUrl::"+imageUrl); // これがそもそもBASE64の形式！！
    const img = document.createElement("img"); // img要素を作成
    img.src = imageUrl; // URLをimg要素にセット
    img.onload = () => {
      const w = img.naturalWidth;
      const h = img.naturalHeight;
      console.log(w + ' x ' + h);
      console.log(img.src);
      refrectImg(img);
    }
  }
  // いざファイルをURLとして読み込む
  reader.readAsDataURL(files[0]);
});
  </script>
</html>
あとがき：

「.onload」の書き方があんまりうまくできず、反省。

reader.onload の関数は名前つけて書けばもっとキレイかもしれない。

アロー関数は慣れてきた。const XXX は好き。

img.onload で imageUrl をログで見たかったが。。 勘違いでした、できる。
たいして苦労なくできました

Discussion
