JavaScript - 从HTML img src获取字节大小

Question

我想知道如何使用HTML/JS从“img”标签的“src”获取以字节为单位的大小。

<img src="https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif"/>

在上面的示例中，我基本上想知道“testpattern.gif”有多大（以字节为单位）。

提前致谢。

- user4532193

---

你可以从“img”标签中获取宽度和高度。 - Blaatpraat

我能否仅通过宽度和高度计算以字节（KB，MB，GB等）为单位的大小？如果可以，如何计算？ - user4532193

问题不在于宽度和高度，而在于字节大小。 - T.J. Crowder

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

我的错，有点着急了。https://dev59.com/1FLTa4cB1Zd3GeqPfPp3 和 https://dev59.com/dXM_5IYBdhLWcg3wmkUK#1310399 这两个链接提供了解决方案。 - Blaatpraat

Answer 1

好的，现在是2017年，您可以使用资源计时API在Javascript中提取图像的transferSize、encodedBodySize和decodedBodySize：

以下是访问页面上所有图像大小信息的代码（请注意下面的小细节）:

var imgElems = document.getElementsByTagName('img');
for ( var i=0, len = imgElems.length; i < len; i++ ) 
{
    var url = imgElems[i].src || imgElems[i].href;
    if (url && url.length > 0)
    {
        var iTime = performance.getEntriesByName(url)[0];
        console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize
    }
}

• 确保在文档加载完成后运行上述代码（以确保图像被加载）
• 由于CORS，来自不同域的图像的时间信息可能不可用（除非不同域的服务器设置了Timing-Allow-Origin HTTP响应头）
• 确保资源计时API对你要目标的浏览器可用：http://caniuse.com/#feat=resource-timing
• 了解transferSize、encodedBodySize、decodedBodySize之间的区别，以确保使用正确的大小属性。

- Punit S

---

这是一个很好的API可以讨论，但是上面的代码不能按照原样工作。getEntriesByName()需要第二个参数。默认情况下，我在performance.getEntries()中看不到任何图像条目。 - emersonthis

getEntriesByName的第二个参数是可选的。参考：https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByName。上面的代码使用document.getElementsByTagName首先获取图像标签（用于它们的URL）。 - Punit S

它适用于 document.getElementsByTagName('script') 或者除了 img 之外的其他内容吗？ - user985399

如果图像位于子域上（大多数情况下是这样），则最新版Firefox中的图像三个参数都为零，因此非常遗憾，它几乎没有用处。 - Owyn

Cors 真是个麻烦。 - Pangamma

Answer 2

很遗憾，提出的解决方案不可行，因为返回的值与图像实际大小不匹配。

假设您正在使用URL，可以执行以下操作:

const fileImg = await fetch(URL_TO_IMG).then(r => r.blob());

这会通过HTTP获取资源，并将完整的二进制数据作为blob对象返回，然后你可以访问它的属性，包括其以字节为单位的大小:

fileImg.size

- Juan José Rueda

---

只是喜欢这些一行代码的解决方案。+1 - Ivan