js obtiene el encabezado de respuesta de la dirección de solicitud img src, (URL.createObjectURL(), URL.revokeObjectURL())

img src enviará una solicitud de obtención de forma predeterminada, cuando src es una dirección de red, puede enviar una solicitud para obtener encabezados de respuesta

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

Cuando src sigue solicitando la dirección, por ejemplo, los encabezados de respuesta llevan una marca de tiempo X-Timestamp, como se muestra en la figura, la respuesta que se obtiene al enviar la solicitud nuevamente no es la marca de tiempo del img actual 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);

El método URL.createObjectURL() creará una URL que apunte al objeto de parámetro en función de los parámetros entrantes. La vida de esta URL solo existe en el documento en el que se creó. La nueva URL del objeto apunta al objeto File o Blob ejecutado. .

El método URL.revokeObjectURL() liberará una URL de objeto creada por URL.createObjectURL().

El objeto Blob son datos binarios. Por ejemplo, el objeto creado por new Blob() es un objeto Blob. Por ejemplo, en XMLHttpRequest, si el tipo de respuesta se especifica como blob, el valor devuelto también es un objeto blob.

Especifica que el formato de los datos devueltos son datos binarios de blob.

Cree una URL de objeto a través de los datos binarios de la imagen devuelta. Asigne la URL al src de img

Suelte la URL del objeto cuando se cargue la imagen.