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

我想能够得到一个网页上的图像文件大小

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

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

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

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

编辑：我正在处理一些图像的保持活动连接，因此内容长度标题不可用。假设您可以使用HTML5

创建画布

把图像放进去

使用

.toDataURLHD（）

获取base64编码的字符串

使用一些以字节为单位获取图像大小

玩得开心

---

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

您无法直接获取文件大小（或其中的任何数据）

唯一的方法有点脏，因为您必须执行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);

---

这里有一个React版本，对我来说很有效，如果可以节省一些时间，就发布它

表单字段

JSX

---

老问题，但我的看法是：我也有同样的问题，但我不想依靠缓冲来阻止我的应用程序下载两次图像（正如公认的答案那样）。我最后做的是将文件作为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); })

---

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

我知道的唯一方法可能是使用AJAX调用文件，获取内容长度头并处理它。@Popleak，这不是OP所要求的。事实上，这个问题甚至澄清了（而不是维度）。“ajax head请求的内容长度头将为您提供所需的信息，你必须做一个二进制ajax，看看响应的大小。我不认为这对压缩图像的文件大小有用：一个10万像素的jpeg可能需要1kb或100kb，这取决于压缩@dandavis他实际上想要的是以字节为单位的图像文件大小，而不是实际的尺寸（以像素为单位）。更好地阅读这个问题--编辑——等等，也许我弄糊涂了，但重新压缩/转储图像数据不会告诉您原始文件的大小……我在任务列表中的什么位置重新压缩它？toDataURLHD（）导出png或jpeg：除非完全巧合，否则任何一个都几乎肯定是与原始文件不同的最终文件大小。另外，atob（dataurl.split（“，”[1]）.length是获取dataurl的实际文件大小的一种不那么麻烦的方法。如果有疑问，请继续尝试导出与导入的图像相同的图像，并获得完全相同的文件大小。我敢说；）

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