从HTML img src中获取字节大小

I would like to know how to get the size in bytes from the "src" from an "img" tag with HTML/JS.

我想知道如何从带有HTML/JS的“img”标签的“src”中获取字节大小。

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

In the above example I would basicly want to know how big "testpattern.gif" is (in bytes).

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

Thanks in advance.

提前谢谢。

2 个解决方案

#1

Javscript is a pure client side scripting and if you ask me whether we can get the image size only by using javascript, than my answer is “NO”. Even if you run the files locally, you won’t be able to get the file size.

Javscript是一个纯粹的客户端脚本，如果您问我是否只能通过使用javascript获得图像大小，我的回答是“不”。即使在本地运行文件，也无法获得文件大小。

XMLHttpRequest object

XMLHttpRequest对象

var obj = new XMLHttpRequest();
obj.open('HEAD', 'image path', true);
obj.onreadystatechange = function(){
  if ( obj.readyState == 4 ) {
    if ( obj.status == 200 ) {
      alert('Size in bytes: ' + obj.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
obj.send(null);

This is basically used to send http or https request to a server behind the scene and load the response back to the script. This is supported by modern browsers, the older ones used to have a similar one called ActiveXObject. The onReadyStateChange event has its 5 ready stages.

这主要用于向场景后面的服务器发送http或https请求，并将响应加载回脚本。这是由现代浏览器支持的，旧的浏览器曾经有一个类似的叫做ActiveXObject的浏览器。onReadyStateChange事件有5个准备阶段。

0=request not initialized
0 =没有初始化请求
1=server connection established
1 =服务器连接建立
2=request received
2 =请求收到
3=processing request
3 =处理请求
4=processing finished and response is ready
4=处理完成，响应就绪

。

#2

Well, this is 2017 and you can now use Resource Timing API to extract an image's transferSize, encodedBodySize, decodedBodySize within javascript:

这是2017年，你现在可以使用资源定时API提取图像的传输大小，encodedBodySize，解码的bodysize在javascript内:

Below is the code to access size information for all the imgs on a page (see the caveat to all below):

下面是访问页面上所有img的大小信息的代码(请参阅下面对所有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
    }
}

Make sure you run the above code after document onload (to be sure images are loaded)
确保在加载文档后运行上面的代码(确保载入图像)
Due to CORS, timing information for images coming from a different domain may not be available (unless the different domain's server has set Timing-Allow-Origin HTTP response header)
由于CORS，来自不同域的图像的时间信息可能不可用(除非不同域的服务器设置了时间允许的HTTP响应头)
Be sure resource timing api is available for the browser(s) you are targetting : http://caniuse.com/#feat=resource-timing
确保资源计时api对您正在访问的浏览器是可用的:http://caniuse.com/#feat=资源计时
Make sure you get a grasp of the difference between transferSize, encodedBodySize, decodedBodySize to be sure you use the right size attribute.
确保你掌握了转换大小、编码器大小、解码体型大小的区别，以确保你使用了正确的尺寸属性。

#1