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

Question

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

假设我有一个已经加载的页面上的图片，如下：

(图片样例)

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

需要注意的是，我没有使用任何输入或让用户上传图片，因此无法使用文件API从浏览器按钮获得图片大小的SO答案。所有我想要做的就是根据id和src url获取任意图像的文件大小。

编辑：我正在处理一些图片的keep-alive连接，因此Content-Length头不可用。

- CafeHey

---

可能是通过Javascript确定图像文件大小+尺寸的重复问题？ - Joren

@Popnoodles，这不是OP所问的。事实上，问题甚至澄清了“（不是尺寸）”。 - rgthree

@rafaelsoufraz 他明确表示他需要以字节为单位的大小（他不需要图像的尺寸）。并且在加粗的文字中，他还编辑并写道由于保持活动连接，他无法使用Content-Length。 - Denys Vitali

如果您无法执行ajax HEAD，则必须执行二进制ajax并查看响应的大小。 - dandavis

@rafaelsoufraz，你链接的帖子主要涉及尺寸问题，那里使用的API来确定文件大小（以字节为单位）已不再受支持。 - S Grimminck

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

- Sebastien C.

Answer 2

虽然这是一个老问题，但我还是想分享我的看法：我曾经遇到同样的问题，但不想依靠缓冲来防止应用程序重复下载图片（就像被接受的答案所做的那样）。最终我做的是将文件作为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); })

这看起来更加简洁，可能仍然对某些人有用。

- Sam

Answer 3

这里是一个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);
}

- Michael Nelles

Answer 4

假设您可以使用HTML5

1. 创建一个画布
2. 将图像放入其中
3. 使用.toDataURLHD()获取图像数据
4. 获取base64编码的字符串
5. 使用一些疯狂的计算来获取图像大小（以字节为单位）。

玩得开心！

也许使用服务器端脚本会更容易，这样就不会依赖于HTML5了。

- Denys Vitali

---

我认为这种方法无法获取压缩图像的文件大小：一个有100,000个像素的JPEG图像，根据压缩程度可能只有1KB或者100KB。 - dandavis

@dandavis，他实际上想要图像文件的大小（以字节为单位），而不是实际尺寸（以像素为单位）。请仔细阅读问题！--编辑-- 等一下，也许我搞混了。 - Denys Vitali

正确，但重新压缩/转储图像数据无法告诉您原始文件的大小... - dandavis

在我的任务列表中，我应该在哪里重新压缩它？ - Denys Vitali

toDataURLHD() 函数可以导出 png 或 jpeg 格式的图片，但几乎肯定会与原始文件大小不同，除非纯属巧合。此外，使用 atob(dataurl.split(",")[1]).length 可以更准确地获取 dataURL 的实际文件大小。如果不确定，可以尝试导出与导入相同的图片，并得到完全相同的文件大小。我敢打赌你做不到 ;) - dandavis

@dandavis你还有别的机会吗？我的可能性已经用完了D: - Denys Vitali