js は、img src リクエスト アドレスのレスポンス ヘッダーを取得します (URL.createObjectURL()、URL.revokeObjectURL())

img src はデフォルトで get リクエストを送信します。src がネットワーク アドレスの場合、レスポンス ヘッダーを取得するリクエストを送信できます。

<img id="oneImg" src="http://192.168.1.174:9999/rotateicons.png" width="512px"
          height="384px" />

let request = new XMLHttpRequest();
request.open('get', "http://192.168.1.174:9999/rotateicons.png", true);
request.onreadystatechange = e => {
    if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
        let headr = request.getAllResponseHeaders();
        console.info(headr);
        let Pragma= request.getResponseHeader('Pragma');
        console.log("Pragma== " + Pragma);
    }
};
request.send(null);

たとえば、図に示すように、src がアドレスを要求し続ける場合、応答ヘッダーにはタイムスタンプ X-Timestamp が含まれており、リクエストを再送信して得られる応答は現在の img src のタイムスタンプではありません。

 

 

      let request = new XMLHttpRequest();
      request.responseType = 'blob';
      request.open('get', "http://192.168.1.174:9999/rotateicons.png", true);
      request.onreadystatechange = e => {
        if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
          let xTimestamp = request.getResponseHeader('X-Timestamp');
          // var headr = request.getAllResponseHeaders();
          // console.info(headr);
          // console.log("X-Timestamp== " + xTimestamp);
          console.info(request.response);
          img.src = URL.createObjectURL(request.response);
          img.onload = () => {
            URL.revokeObjectURL(img.src);
          }
        }
      };
      request.send(null);

URL.createObjectURL()メソッドは、受信パラメータに基づいてパラメータ オブジェクトを指す URL を作成します。この URL の存続期間は、それが作成されたドキュメント内にのみ存在します。新しいオブジェクト URL は、実行された File オブジェクトまたは Blob オブジェクトを指します。

URL.revokeObjectURL()メソッドは、URL.createObjectURL() によって作成されたオブジェクト URL を解放します。

Blobオブジェクトはバイナリ データです。たとえば、new Blob() によって作成されたオブジェクトは Blob オブジェクトです。たとえば、XMLHttpRequest では、指定された responseType が blob の場合、戻り値も blob オブジェクトになります。

返されるデータ形式が BLOB バイナリ データであることを指定します。

返された画像バイナリデータを使用してオブジェクト URL を作成し、その URL を img の src に割り当てます。

画像のロード時にオブジェクト URL を解放します。