js 获取 img src 请求地址的响应头 response header，（URL.createObjectURL()、URL.revokeObjectURL()）

img src 会默认发送get请求，当src 为网络地址时，可以发送请求获取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);

当src 不断请求地址时，例如 response headers 带一个时间戳X-Timestamp，如图，再发请求获取的response就不是当前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.

js 获取 img src 请求地址的响应头 response header，（URL.createObjectURL()、URL.revokeObjectURL()）

猜你喜欢