Javascript MEMO

copy

[test7.html(javascript)]
fetch("http://localhost/img/image.php")
  .then(res => res.blob())
  .then(blob => {
    document.getElementById("img1").src = URL.createObjectURL(blob);
  })
  .catch(err => console.error("画像取得失敗:", err));

copy

[test7.html(javascript)]
fetch(“http://localhost/img/image.php”)
  .then(res => res.blob())
  .then(blob => {
    document.getElementById(“img1”).src = URL.createObjectURL(blob);
  })
  .catch(err => console.error(“Image retrieval failed:”, err));

.blob() は JavaScript の Fetch API に用意されてる関数です。
サーバーからのレスポンスをバイナリデータとして扱うために使用します。

.then(res => res.blob())

.blob() は Response オブジェクトのメソッドです。
画像などのバイナリデータを受け取っています。
サーバーから返ってきたデータを Blob（バイナリ大きなオブジェクト）に変換してくれます。
JSONやテキストじゃないデータ
例えば、画像や音声などの大きなデータを扱うときに使用します。

URL.createObjectURL(blob);

この例ではphp側で
header("Content-Type: image/png");
と設定していることで画像データと認識することができます。
URL.createObjectURLで変換したデータをsrcプロパティに設定することで画像を表示させています。