Определение размера файла изображения + размеры с помощью Javascript?

Как часть веб-приложения, после загрузки и рендеринга изображений на веб-странице мне нужно определить размер файла изображения (КБ) и разрешение в контексте браузера (чтобы я мог, например, отобразить эту информацию на странице). Это должно быть сделано на стороне клиента, очевидно. Должен быть в состоянии решить x-браузер без элемента управления ActiveX или Java-апплета (IE7+, FF3+, Safari 3+, IE6 приятно иметь), хотя это не обязательно быть таким же решением для каждого браузера.

В идеале это должно быть сделано с использованием системного Javascript, но если мне абсолютно необходим JQuery или похожая библиотека (или ее небольшая часть), это может быть сделано.

Источник

12 ответов

Решение

Редактировать:

Чтобы получить текущий размер пикселя в браузере элемента DOM (в вашем случае элементов IMG), исключая границы и поля, вы можете использовать свойства clientWidth и clientHeight.

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

Теперь, чтобы получить размер файла, теперь я могу думать только о свойстве fileSize, которое Internet Explorer предоставляет для элементов документа и IMG...

Редактировать 2: что-то приходит мне в голову...

Чтобы получить размер файла, размещенного на сервере, вы можете просто сделать HTTP-запрос HEAD, используя Ajax. Этот вид запроса используется для получения метаинформации о URL, подразумеваемом запросом, без передачи какого-либо его содержания в ответе.

В конце HTTP-запроса у нас есть доступ к HTTP-заголовкам ответа, включая Content-Length, который представляет размер файла в байтах.

Базовый пример с использованием необработанного XHR:

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

Примечание: имейте в виду, что когда вы делаете запросы Ajax, вы ограничены одной и той же политикой происхождения, которая позволяет вам делать запросы только в пределах одного домена.

Проверьте рабочее доказательство концепции здесь.

Изменить 3:

1.) Что касается Content-Length, я думаю, что несоответствие размера может произойти, например, если ответ сервера распакован, вы можете выполнить несколько тестов, чтобы увидеть, происходит ли это на вашем сервере.

2.) Чтобы получить исходные размеры изображения, вы можете создать элемент IMG программно, например:

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='http://sstatic.net/so/img/logo.png';
Источник

Проверьте размер загруженного изображения с помощью Javascript

<script type="text/javascript">
    function check(){
      var imgpath=document.getElementById('imgfile');
      if (!imgpath.value==""){
        var img=imgpath.files[0].size;
        var imgsize=img/1024; 
        alert(imgsize);
      }
    }
</script>

HTML-код

<form method="post" enctype="multipart/form-data" onsubmit="return check();">
<input type="file" name="imgfile" id="imgfile"><br><input type="submit">
</form>
Источник

Получение оригинальных размеров изображения

Если вам нужно получить исходные размеры изображения (не в контексте браузера), свойства clientWidth и clientHeight не работают, поскольку они возвращают неверные значения, если изображение растягивается / сокращается с помощью CSS.

Чтобы получить исходные размеры изображения, используйте свойства naturalHeight и naturalWidth.

var img = document.getElementById('imageId'); 

var width = img.naturalWidth;
var height = img.naturalHeight;

ps Это не отвечает на исходный вопрос, так как принятый ответ делает работу. Это вместо этого служит дополнением к нему.

Источник

Как насчет этого:

var imageUrl = 'https://cdn.sstatic.net/Sites/stackru/img/sprites.svg';
var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open('GET', imageUrl, true); 
xhr.responseType = 'blob';
xhr.onload = function() 
{
    blob = xhr.response;
    console.log(blob, blob.size);
}
xhr.send();

http://qnimate.com/javascript-create-file-object-from-url/

из-за одной и той же политики происхождения, только работа под тем же происхождением

Источник

По ширине и высоте:

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

Что касается размера файла, который вы можете использовать performance

var size = performance.getEntriesByName(url)[0];
console.log(size.transferSize); // or decodedBodySize might differ if compression is used on server side
Источник

Сервисные работники имеют доступ к информации заголовка, включая Content-Length заголовок.

Работники сферы обслуживания немного сложны для понимания, поэтому я создал небольшую библиотеку под названием sw-get-headers.

Чем вам нужно:

  1. подписаться на библиотеку response событие
  2. определить URL-адрес изображения среди всех сетевых запросов
  3. здесь вы можете прочитать Content-Length заголовок!

Обратите внимание, что ваш веб-сайт должен работать по протоколу HTTPS, чтобы использовать Service Workers, браузер должен быть совместим с Service Workers, и изображения должны быть в том же источнике, что и ваша страница.

Источник

Большинство людей ответили, как можно узнать размеры загруженного изображения, поэтому я просто попытаюсь ответить на другую часть вопроса - зная размер файла загруженного изображения.

Вы можете сделать это с помощью API синхронизации времени ресурсов. В частности, для этой цели можно использовать свойства TransferSize, encodedBodySize и decodedBodySize.

Посмотрите мой ответ здесь для фрагмента кода и дополнительной информации, если вы ищете: JavaScript - Получить размер в байтах из HTML img src

Источник

Вы можете использовать общий объект изображения для динамической загрузки источника, а затем измерить его:

          const img = new Image();
    img.src = this.getUrlSource()
    img.onload = ({target}) =>{
      let width = target.width;
      let height = target.height;
    }
Источник

Вы можете получить размеры, используя getElement(...).width а также ...height,

Поскольку JavaScript не может получить доступ к чему-либо на локальном диске по соображениям безопасности, вы не можете просматривать локальные файлы. Это также верно для файлов в кеше браузера.

Вам действительно нужен сервер, который может обрабатывать запросы AJAX. На этом сервере установите службу, которая загружает образ и сохраняет поток данных в фиктивном выводе, который просто считает байты. Обратите внимание, что вы не всегда можете полагаться на поле заголовка Content-length, поскольку данные изображения могут быть закодированы. В противном случае было бы достаточно отправить запрос HTTP HEAD.

Источник

Вы можете найти размер изображения на странице, используя что-то вроде

document.getElementById('someImage').width

размер файла, однако, вам придется использовать что-то на стороне сервера

Источник 
var img = new Image();
img.src = sYourFilePath;
var iSize = img.fileSize;
Источник

Единственное, что вы можете сделать, это загрузить изображение на сервер и проверить размер и размер изображения, используя некоторый язык на стороне сервера, такой как C#.

Редактировать:

Ваша потребность не может быть выполнена с использованием только JavaScript.

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