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

Question

我想知道如何使用HTML/JS从"img"标签中获取"src"的字节大小.

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

在上面的例子中,我基本上想知道"testpattern.gif"有多大(以字节为单位).

提前致谢.

Answer 1

好吧,这是2017年,您现在可以使用Resource Timing API在javascript中提取图像的transferSize,encodedBodySize,decodingBodySize:

下面是访问页面上所有 imgs的大小信息的代码(请参阅下面的所有注意事项):

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

• 确保在文档onload之后运行上面的代码(以确保加载图像)
• 由于CORS,来自不同域的图像的定时信息可能不可用(除非不同域的服务器设置了Timing-Allow-Origin HTTP响应头)
• 确保资源计时api适用于您要定位的浏览器:http://caniuse.com/#feat=resource-timing
• 确保您掌握transferSize,encodedBodySize,decodingBodySize之间的区别,以确保使用正确的大小属性.

Answer 2

遗憾的是，所提出的解决方案不起作用，因为返回的值与图像的实际大小不匹配。

假设您使用的是 URL，您可以执行以下操作：

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

这将通过 HTTP 获取资源，然后将完整的二进制文件作为 blob 对象返回，然后您可以访问其属性，包括其大小（以字节为单位），如下所示：

fileImg.size