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

Question

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

因此，假设我在页面上有一个图像（已加载），如下所示：

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

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

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

编辑：我正在处理某些图像的保持活动连接，因此 Content-Length 标头不可用。

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

Answer 2

这是一个对我有用的 React 版本，如果可以节省一些时间，请将其发布。

表单域

<input type="file" 
   name="file"  
   id="file" 
   multiple="multiple" 
   onChange={onChangeHandler} 
   className="fileUp" />

JSX

const onChangeHandler = event => {
    console.log(event.target.files[0].size);
}

Answer 3

老问题，但这是我的看法：我遇到了同样的问题，但不想依靠缓冲来防止我的应用程序下载图像两次（正如接受的答案那样）。 我最终做的是将文件作为 blob 获取，读取文件大小，然后使用 blob 作为图像源。 这可以通过URL.createObjectURL()函数轻松完成，如下所示：

let img = new Image()
img.crossOrigin = "Anonymous"; // Helps with some cross-origin issues

fetch('foo.png')
.then(response => response.blob())
.then(blob => { img.src = URL.createObjectURL(blob); })

这看起来更干净，也许它仍然对某些人有用。

Answer 4

假设您可以使用 HTML5

1. 创建画布
2. 把图像放在那里
3. 使用.toDataURLHD()获取图像数据
4. 抓取 base64 编码的字符串
5. 使用一些疯狂的计算来获得以字节为单位的图像大小。

玩得开心！

也许使用服务器端脚本要容易得多，所以它不会依赖于 HTML5