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.