JavaScript-从HTML img src中获取以字节为单位的大小

JavaScript - Get size in bytes from HTML img src

本文关键字：为单位 字节 获取 HTML img src JavaScript-      更新时间：2023-09-26

我想知道如何用HTML/JS从"img"标记的"src"中获得字节大小。

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

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

提前谢谢。

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

以下是访问页面上所有img的大小信息的代码（请参阅下面的所有警告）：

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-定时
  • 确保掌握transferSize、encodeBodySize和decodeBodySze之间的区别，以确保使用正确的大小属性

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

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

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

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

fileImg.size
相关文章：