Как правильно получить размер изображения и записать его в массив js?

Question

[nauandr]

Есть следующий код:

// Функция загрузки изображений на предпросмотр
function loadInView(files) {
    // Для каждого файла
    $.each(files, function(index, file) {
        // Создаем новый экземпляра FileReader
        var fileReader = new FileReader();
        // Инициируем функцию FileReader
        fileReader.onload = (function(file) {
            return function(e) {
                var image = new Image();
                image.src = fileReader.result;
                image.onload = function(){
                    width = this.width;
                    height = this.height;
                    quality = width * height; ///////////////здесь получаем качество изображения, которое надо записать в массив
                    return quality;
                }
                // Помещаем URI изображения в массив
                dataArray.push({
                    quality: file.quality, value: file.quality, ////// как записать в массив то, что получили ранее в переменной quality????
                    name : file.name, value : this.result,
                });
                addImage((dataArray.length-1));
            };
        })
        (files[index]);
        // Производим чтение картинки по URI
        fileReader.readAsDataURL(file);
    });
    return false;
}

// Процедура добавления эскизов на страницу
function addImage(ind) {
    // Если индекс отрицательный значит выводим весь массив изображений
    if (ind < 0) {
        start = 0;
        end = dataArray.length;
    } else {
        // иначе только определенное изображение
        start = ind;
        end = ind + 1;
    }
    // Цикл для каждого элемента массива
    for (i = start; i < end; i++) {

        alert(dataArray[i].quality); //сюда нужно получить значение из массива

        //////// остальной код /////

    }
}

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

Comments

[Roman]

Попробуй это:

const getImageSize = (src) => {

        return new Promise((resolve, reject) => {

            try {

                const image = new Image();
                image.src = src;

                image.addEventListener('load', (e) => {
                    resolve({
                        width: e.target.width,
                        height: e.target.height,
                        quality: e.target.width * e.target.height
                    });
                });

                image.addEventListener('error', (e) => {
                    throw new Error('error');
                });

            } catch (error) {
                reject(error);
            }

        });
    };

    const getDataUrl = (file) => {

        return new Promise((resolve, reject) => {

            try {

                const fr = new FileReader();
                fr.readAsDataURL(file);

                fr.addEventListener('load', (e) => {
                    resolve(fr.result);
                }, false);

                fr.addEventListener('error', (e) => {
                    throw new Error('error');
                });

                fr.addEventListener('abort', (e) => {
                    throw new Error('abort');
                });

            } catch (error) {
                reject(error);
            }

        });

    };
    
    const processFiles = async (files) => {

        const dataArray = [];

        for (let file of files) {

            const dataUrl = await getDataUrl(file).catch((error) => {
                console.log('[dataUrl][error]', error);
            });

            const imageSize = await getImageSize(dataUrl).catch((error) => {
                console.log('[imageSize][error]', error)
            });
            console.log({
                dataUrl: dataUrl,
                imageSize: imageSize
            });
            dataArray.push({
                quality: imageSize.quality,
                name : file.name, 
                src: this.src,
            });

            //addImage(dataArray.length-1);

        }

    };

   processFiles([filesList]);