Использование размеров изображения из URL без загрузки его на страницу - Javascript - PullRequest
0 голосов
/ 01 августа 2020

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

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

Пример массива возвращаемых объектов API [0]

Вот соответствующий фрагмент кода, включая вызов API.

    spaceApp.getRoverPhotos = (date) => {
        $.ajax({
            url: spaceApp.roverUrl,
            method: 'GET',
            data: {
                api_key: spaceApp.key,
                earth_date: date,
                camera: spaceApp.cameras,
                page: 1,
            }
        }).then((res) => {

            //functioning code but doesn't wait for stuff to load.
            let displayArray = res.photos.filter( (each) => {  
                let imageDim = new Image();
                imageDim.src = each.img_src;    
                if(imageDim.naturalWidth >= 1000 && imageDim.naturalHeight >= 1000) {
                    return true;
                }
                else {
                    return false;
                }
            });
            console.log(displayArray);
        })
    }

Результаты не согласуются, и я думаю, что это способ загрузки изображений. Метод фильтрации используется после успешного обещания, поэтому я знаю, что массив последовательно возвращает нужную мне информацию, но я не всегда получаю естественную высоту и ширину из-за того, как что-то загружается. Я использовал forEach, чтобы записать в консоль естественную высоту и ширину, когда я отправляю дату дважды подряд. Первый не возвращает мне значений, второй загружает их все:

Первая отправка, 25 результатов из 0 0, затем все отображаются при повторной отправке формы

Думаю, это как-то связано с кешированием изображений. Я пробовал использовать image.onload творчески, но не уверен, что это имеет смысл, учитывая, что я нигде не использовал их на странице (аналогично я пробовал imageDim.addEventHandler('load', ()=>{})). Я пробовал использовать карту для создать новый массив изображений, используя описанный выше подход new Image (), а затем отфильтровать новый массив, но я столкнулся с той же проблемой. Я подумал об использовании обещания, но не могу понять, как «загружать» изображения не отображая их на странице и используя это как обещание внутри фильтра.

Я видел и безуспешно пробовал несколько вариантов этого:

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

Я извините, если я пропустил шаг здесь, но я работал над этим в течение нескольких часов безуспешно. Я попросил помощи у своего единственного старшего друга-разработчика, но он не смог дать мне много рекомендаций, так как это произошло чтобы не быть дома в это время (он предложил мне «загрузить» изображения в новый массив, а затем отфильтровать, но у меня такая же проблема с загрузкой изображения - я попробовал его предложение). 1026 * Если кто мог бы уделить время, чтобы помочь мне, я был бы очень признателен! Я чувствую, что нахожусь на препятствии, потому что я не совсем понимаю природу истинной проблемы, с которой я сталкиваюсь. Если кто-то может сказать мне, что мне не хватает, я могу продолжить поиск в Google! Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...