使用JavaScript（或类似jQuery的库）获取图像文件大小的方法？

Question

像这样：

<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png">

我希望获得大小为7.3KB的logo1w.png文件。

如何实现？

- Koerr

Answer 1

您可以对图片URL进行HTTP HEAD请求。这将返回HTTP头，其中包括内容长度（即文件大小）。当图像是动态生成而不是静态服务时，这需要向服务器发送额外的请求，效率不高。

- Manfre

Answer 2

我不知道有什么单一的方法可以始终准确地获取文件大小，但如果您愿意跳过一些障碍，您可以：

1）根据尺寸和文件类型进行估算。由于压缩技术存在一定的差异，但您可以运行一些统计数据并得出半可靠的启发式方法。

2）在IE中，使用图像的fileSize属性。在其他支持Canvas的浏览器中，使用描述在JavaScript中获取图像数据的此问题中所述的技术来抓取dataURL，然后进行数学计算（乘以3/4，因为base64是4/3大小增加）。

编辑

3）其他人提出的建议（特别是在Fabien Bernede的答案中链接的问题中详细说明）关于获取HTTP Headers是精确而聪明的。可能在某些情况下违反跨域限制，但仍然可能是最一致和有效的方法。

- Weston C

---

最“一致”和有效的方法肯定是使用服务器端代理来获取图像并对其进行评估！ - redsquare

完全正确，并值得注意的是，我只是假设他们有一些限制或兴趣，这意味着他们将纯粹使用JavaScript来完成这个任务。 - Weston C

Answer 3

您无法在JavaScript中实现此功能（即使是神奇的jQuery也无能为力！）。您需要一个服务器端脚本来获取图像并计算大小，然后将其返回到页面上。

注意 - 给那些要投反对票的人提个醒，这里的OP并不拥有谷歌域名！

- redsquare

---

任何可下载的内容都有一个大小，而且有几种明确定义的方法可以检索这些信息。 - Manfre

很抱歉，@user326404不是在使用JavaScript。 - redsquare

@redsquare - 这是不正确的。var xhr = new XMLHttpRequest(); xhr.open('HEAD', 'http://whatever.file.git', true); xhr.onreadystatechange = function(){ if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { alert('字节大小：' + xhr.getResponseHeader('Content-Length')); } } }; xhr.send(null); - bmelton

Answer 4

$fileSize = strlen(file_get_contents($imageSrcTag)) // <-- php

文件大小 = strlen（file_get_contents（$ imageSrcTag））// <-- php

- GWolf

---

问者说 JavaScript。这是什么样的回答？ - m3nda