javascript / jquery: загрузка изображений с удаленного сервера в зависимости от размера

Question

У меня есть массив скомпонованных URL-адресов изображений (поэтому изображения все еще находятся на удаленном сервере). То, что я хотел бы сделать, это проверить размеры каждого изображения и загрузить только большие (определенную ширину / высоту) в браузере. Я думаю, что мне нужно сначала загрузить картинки, прежде чем проверять размер, но как бы вы реализовали это, чтобы показывались не все, а только большие? Это вообще возможно?

Answer 1

Вам определенно нужно сначала загрузить их все, без этого невозможно получить ширину / высоту. Тем не менее, вы можете проверить размеры перед их отображением:

var img = document.createElement('img');
img.onload = function() {
  if (img.width > ... && img.height > ...)
    document.getElementById('some_container').appendChild(img);
  else
    img = null;
};
img.src = 'filename.jpg';
// update as per @Orbling's comment:
if (img.complete)
  img.onload();

Answer 2

Предполагая, что ваш массив расположен на стороне сервера и в PHP

Вы можете получить размеры изображения с помощью функции php getimagesize(), которая будет возвращать массив, содержащий высоту и ширину (вместе с некоторой другой метаинформацией),Если высота и ширина соответствуют вашим критериям, вы можете добавить их в выходной массив, который вы можете преобразовать в json и отправить обратно в ваш скрипт jQuery.

Предполагая, что ссылки на изображения находятся в Javascript

Вам нужно будет загрузить изображения, чтобы определить их размеры.Они не должны быть видны все же.Вы можете проверить их ширину с помощью метода $.width() и их высоту с помощью метода $.height().Если размеры соответствовали вашим критериям, покажите изображение.

$(function(){

  var images = ['image1.jpg', 'image2.jpg'];

  $(images).each(function(){
    // Create our Image
    currImage = document.createElement('img');
    // Add it and hide it
    $("body").append( $(currImage).attr('src', this).hide() );
    // Determine whether it should stay
    (currImage.width < 200) ? $(currImage).remove() : $(currImage).show() ;
  });

});

Answer 3

Лучший способ выполнить этот тип операции - это иметь какой-то веб-сервис, к которому вы можете обратиться, чтобы найти размеры изображений (или, возможно, вернуть предварительно отсортированный массив с их размерами изображений) в javascript.

Можно вызвать страницу PHP, размещенную в каталоге изображений, и использовать ее для сканирования изображений, сортировки массива по размеру и возврата массива в JSON, XML или HTML в код JS для отображения.

Answer 4

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

Ответы на эти вопросы могут помочь вам: Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)

Как получить размер изображения (высота и ширина) с помощью JavaScript?

Answer 5

Другой возможностью было бы создание новых Image() объектов и установка их источников в качестве каждого URL-адреса в массиве. прикрепите обработчик onload к изображению и запросите его размер, прежде чем решить, добавлять ли его в тело документа или нет.

Я не верю, что вы сможете сделать это надежно, не загрузив ВСЕ изображения полностью с сервера, но вы можете быть в состоянии выполнять запросы AJAX HEAD, чтобы получить размер файла изображения - при условии соответствующие серверы отвечают соответствующим образом. Это позволит вам отфильтровать картинки, которые явно слишком малы.