JavaScript-получить размер в байтах из HTML img src

Я хотел бы знать, как получить размер в байтах из "src" из тега "img" с HTML/JS.

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

в приведенном выше примере я бы в основном хотел знать, насколько велик " testpattern.gif " (в байтах).

спасибо заранее.

10
byte html javascript src

2 ответов

Javscript является чистым скриптом на стороне клиента, и если вы спросите меня, можем ли мы получить размер изображения только с помощью javascript, чем мой ответ "нет". Даже если вы запустите файлы локально, вы не сможете получить размер файла.

XMLHttpRequest object

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);

Это в основном используется для отправки http или https запросить сервер за сценой и загрузить ответ обратно в сценарий. Это поддерживается современными браузеры, более старые, использовали аналогичный, называемый ActiveXObject. The onReadyStateChange событие имеет свои 5 готовых этапов.

  • 0=запрос не инициализирован
  • 1=установлено соединение с сервером
  • 2=запрос получен
  • 3=запрос на обработку
  • 4=обработка завершена, и ответ готов

.

5

Ну, это 2017, и теперь вы можете использовать API синхронизации ресурсов для извлечения transferSize изображения, encodedBodySize, decodedBodySize в javascript:

Ниже приведен код для доступа к информации о размере для все 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
    }
}
  • убедитесь, что вы запустите вышеуказанный код после загрузки документа (чтобы убедиться, что изображения загружены)
  • из-за CORS, информация о времени для изображений, поступающих из другого домен может быть недоступен (если сервер другого домена не установил заголовок HTTP-ответа Timing-Allow-Origin)
  • убедитесь, что api синхронизации ресурсов доступен для браузера(ов), который вы нацеливаете:http://caniuse.com/#feat=resource-timing
  • убедитесь, что вы понимаете разницу между transferSize, encodedBodySize, decodedBodySize, чтобы убедиться, что вы используете правильный атрибут размера.
9