javascript - 如何使用 Javascript 获取网页上图像的文件大小？

Question

我希望能够获取网页上图像的文件大小。

假设我在页面上有一张图片(已加载)，如下所示:

如何调用 Javascript(或者更好的是 jquery)中的函数来获取图像的文件大小(而不是尺寸)？

重要的是要注意我没有使用任何输入或让用户上传图像，有很多关于使用文件 API 从浏览按钮获取图像大小的 SO 答案。

我想做的就是根据它的 id 和 src url 获取页面上任意图像的文件大小。

编辑:我正在处理一些图像的保持连接，因此 Content-Length header 不可用。

Answer 1

您无法直接获取文件大小(或其中的任何数据)。

唯一的方法有点脏，因为您必须执行 XMLHTTPRequest(根据“跨源资源共享”，它可能不适用于外部图像)。但是有了浏览器的缓存，它应该不会引起另一个 HTTP 请求。

var xhr = new XMLHttpRequest();
xhr.open("GET", "foo.png", true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function() {
    if(this.readyState == this.DONE) {
        alert("Image size = " + this.response.byteLength + " bytes.");
    }
};
xhr.send(null);