3テラバイト

プログラム関連備忘録サイト。主にゲーム。

未分類

ArrayBufferからデータURIに変換する

投稿日:

<html>
  <head>
  </head>
  <body>
    <form action="" method="post" enctype="multipart/form-data">
      <input accept="image/*" type="file" id="uploadImage">
      <p><img id="thumbnail" src=""></p>
    </form>
    <script>
      uploadImage.onchange = event => {
        const [file] = uploadImage.files
        if (file) {
          let reader = new FileReader();
          reader.onload = (e) => {
            let encodedData = btoa(
              Array.from(
                new Uint8Array(e.target.result),
                x => String.fromCharCode(x)
              ).join('')
            );
            thumbnail.src = `data:image/png;base64,${encodedData}`;
          }
          reader.readAsArrayBuffer(file);
        }
      }
    </script>
  </body>
</html>

リンク

ArrayBuffer – JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

WindowOrWorkerGlobalScope.btoa() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa

Uint8Array – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

String.fromCharCode() – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

-未分類


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Google Search Consoleでプロパティを追加する方法

プロパティの一覧からプロパティを追加を選択します。 [プロパティ タイプの選択]ダイアログが表示され、ドメインとURL プレフィックスのいずれかを選択します。 プロパティ タイプの選択 ドメインかUR …

no image

MacにPostgreSQLをインストールする

こんにちは、今日はMacにPostgreSQLをインストールする方法についてまとめていきます。 本記事ではインストールにHomebrewを使用します。 確認環境 macOS Mojave 10.14. …