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

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

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

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

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

Источник

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. onReadyStateChange Событие имеет 5 готовых этапов.

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

,

Источник

Что ж, это 2017 год, и теперь вы можете использовать Resource Timing API для извлечения изображений TransferSize, encodedBodySize, decodedBodySize в javascript:

Ниже приведен код для доступа к информации о размере для всех изображений на странице (см. Предостережение для всех ниже):

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/
  • Убедитесь, что вы понимаете разницу между TransferSize, encodedBodySize, decodedBodySize, чтобы убедиться, что вы используете правильный размер атрибута.
Источник

К сожалению, предлагаемое решение не работает, поскольку возвращаемое значение не соответствует фактическому размеру изображения.

Предполагая, что вы используете URL-адрес, вы можете сделать следующее:

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

Это получит ресурс через HTTP, а затем вернет полный двоичный файл в виде объекта blob, после чего вы сможете получить доступ к его свойствам, включая его размер в байтах, как:

fileImg.size
Источник
Другие вопросы по тегам