https://idea-hack.com/courses/understand-how-to-handle-data-using-xmlhttprequest-method-of-javascript/lessons/how-to-read-binary-data-image-using-xmlhttprequest-of-javascript/
https://idea-hack.com/courses/understand-how-to-handle-data-using-xmlhttprequest-method-of-javascript/lessons/how-to-read-binary-data-image-using-xmlhttprequest-of-javascript/

JavaScriptのXMLHttpRequestを使ってバイナリデータ(画像)を読み込む方法

JavaScriptのXMLHttpRequestを使ってバイナリデータ(画像)を読み込む

JavaScriptでデータの送信・受信を行う場合、fetch()メソッドを使うのが一般的ですが、昔から存在する機能でHMLHttpRequestがあります。

XMLHttpRequestはfetch()メソッドよりも冗長な書き方をしなければいけませんが、画像読み込み時のプログレスバーを出すことができる点でfetch()メソッドよりも優れている部分があります。

補足

fetch()メソッドでもプログレスバーを出すことができる様ですが、ハック的な実装になります。

サンプルコード

メソッド意味返り値
new XMLHttprequest()インスタンスを生成するXMLHttpRequest
opne(メソッド, url)リクエストを読み込むなし
send()リクエストを送信するなし
XMLHttpRequestAPIの仕様

サンプルコード

サンプルコードとして、画像ファイルを読み込んでページ上に表示するサンプルコードを紹介します。

XMLHttpRequestは基本的にloadイベントを監視して処理後の動作を実装します。

Output
読み込まれたテキストファイルの中身
Pug
table.table
			tbody
				tr
					th 読み込まれたテキストファイルの中身
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

// XHRを作成
  const req = new XMLHttpRequest();

// データの種類を設定
  req.responseType = 'blob';
	
  // 読み込み完了時のイベント
  req.addEventListener('load', (event) => {
    // レスポンスを受け取る
    const data = event.target.response;
    // 画像データに変換
    const source = URL.createObjectURL(data);

    // 画像を作成
    const image = new Image();
    image.src = source;
    // テキストを出力
    targetText.appendChild(image);
  });

  // ファイルを指定
  req.open('GET', 'https://idea-hack.com/wp-content/uploads/2020/03/76751b0e74e8b8890bb32967852e507a-1.jpg');
  // 読み込み開始
  req.send();
インストラクター