Question

我想知道如何从＆＃34; src＆＃34;获取字节大小。来自＆＃34; img＆＃34;用HTML / JS标记。

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

在上面的例子中，我基本上想知道有多大＆＃34; testpattern.gif＆＃34;是（以字节为单位）。

提前致谢。

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，则可以执行以下操作：

wls.exe

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

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

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

2 个答案: