【问题标题】：How do you get the file size of an image on the web page with Javascript?您如何使用 Javascript 获取网页上图像的文件大小？
【发布时间】：2014-01-21 08:26:15
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

Determining image file size + dimensions via Javascript? 的可能重复项
我知道如何做到这一点的唯一方法是使用 AJAX 调用文件并获取内容长度标头并进行处理。
@Popnoodles，这不是 OP 所要求的。事实上，这个问题甚至澄清了“（不是维度）。”
一个 ajax 头请求的 content-length 标头将为您提供所需的信息。
如果你不能做ajax HEAD，你必须做一个二进制ajax，看看响应的大小。

标签： javascript image url src filesize

【解决方案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);

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案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); })

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

【讨论】：

【解决方案4】：

假设您可以使用 HTML5

创建画布
把图片放在那里
用.toDataURLHD()抓取图像数据
获取base64编码的字符串
使用一些mad calculation 来获取图像大小（以字节为单位）。

玩得开心！

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

【讨论】：

我不认为这将有助于获得压缩图像的文件大小：100,000 像素的 jpeg 可能需要 1kb 或 100kb，具体取决于压缩；
@dandavis 他实际上想要以字节为单位的图像文件大小，而不是实际的尺寸（以像素为单位）。更好地阅读这个问题！ --Edit-- 等等，我可能搞糊涂了
对，但是重新压缩/转储图像数据不会告诉您原始文件的大小...
在我的任务列表中哪里重新压缩它？
toDataURLHD() 导出 png 或 jpeg：几乎可以肯定，任何一个最终文件大小都与原始文件大小不同，除非纯属巧合。此外， atob(dataurl.split(",")[1]).length 是获取 dataURL 的实际文件大小的一种不太麻烦的方法。如果有疑问，请继续尝试导出您导入的相同图像并达到完全相同的文件大小。我敢你；）