js gets the response header of the img src request address, (URL.createObjectURL(), URL.revokeObjectURL())

img src will send a get request by default, when src is a network address, you can send a request to get response headers

<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);

When the src keeps requesting the address, for example, the response headers carry a timestamp X-Timestamp, as shown in the figure, the response obtained by sending the request again is not the timestamp of the current 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);

The URL.createObjectURL() method will create a URL pointing to the parameter object based on the incoming parameters. The life of this URL exists only in the document it was created in. The new object URL points to the executed File object or Blob object.

The URL.revokeObjectURL() method will release an object URL created by URL.createObjectURL().

A Blob object is binary data. For example, an object created by new Blob() is a Blob object. For example, in XMLHttpRequest, if the specified responseType is blob, the returned value is also a blob object.

Specifies that the returned data format is blob binary data.

Create an object URL through the returned image binary data. Assign the URL to the src of img

Release the object URL when the image is loaded.