как получить значения ширины и высоты от этого объекта в javascript

Question

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

Это соответствующий код:

Dropzone.options.myDropzone = {
    url: '{{ route('user.upload') }}',
    transformFile: function(file, done) {

        console.log(file);
        //console.log(file[height]);

        for (var property in file) {
            output = property + ': ' + file[property]+'; ';
            console.log(output);
        }

В строке console.log (файла) выводится следующее:

Так что у него есть высота и ширина.

Цикл свойств файла выводит это:

Кто-нибудь знает как получить доступ к высоте и ширине здесь?

Спасибо.

РЕДАКТИРОВАТЬ

Благодаря @kmoser этот код работает сейчас.

transformFile: function(file, done) {

    console.log(file['height']);

    var width = 0;
    var height = 0;
    var reader = new FileReader(); 
    reader.onload = (function(file) {
        var image = new Image();
        image.src = file.target.result;
        image.onload = function() { 
            height = this.height;
            width = this.width;
            console.log('1 '+width);
            console.log('1 '+height);
        }; 
    });
    reader.readAsDataURL(file)

    console.log('2 '+width);
    console.log('2 '+height);
    if (width > height)
    {
        console.log('wider');
    }
    else
    {
        console.log('tall');
    }

Единственная проблема заключается в том, что console.log ('2' + ширина); выводит до console.log ('1' + ширина);

Можно ли подождать?

РЕДАКТИРОВАТЬ 2

Выяснил это как хорошо.

async function readFileAsDataURL(file) {
    let result_base64 = await new Promise((resolve) => {

        let reader = new FileReader(); 
        reader.onload = (function(file) {
            var image = new Image();
            image.src = file.target.result;
            image.onload = function(file) { 
                height = this.height;
                width = this.width;
                console.log('1 '+width);
                console.log('1 '+height);
                resolve(reader.result);
            }; 
        });
        reader.readAsDataURL(file)

    });
    return result_base64;
}

Dropzone.options.myDropzone = {
    url: '{{ route('user.upload') }}',
    transformFile: async function(file, done) {

        let result = await readFileAsDataURL(file);

        console.log('2 '+width);
        console.log('2 '+height);
        if (width > height)
        {
            console.log('wider');
        }
        else
        {
            console.log('tall');
        }

Отлично работает! Спасибо за помощь!

Answer 1

Окончательное решение

async function readFileAsDataURL(file) {
    let result_base64 = await new Promise((resolve) => {

        let reader = new FileReader(); 
        reader.onload = (function(file) {
            var image = new Image();
            image.src = file.target.result;
            image.onload = function(file) { 
                height = this.height;
                width = this.width;
                console.log('1 '+width);
                console.log('1 '+height);
                resolve(reader.result);
            }; 
        });
        reader.readAsDataURL(file)

    });
    return result_base64;
}

Dropzone.options.myDropzone = {
    url: '{{ route('user.upload') }}',
    transformFile: async function(file, done) {

        let result = await readFileAsDataURL(file);

        console.log('2 '+width);
        console.log('2 '+height);
        if (width > height)
        {
            console.log('wider');
        }
        else
        {
            console.log('tall');
        }

Answer 2

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

console.log(file['height']); 

ИЛИ

console.log(file.height);

Оба будут давать одинаковый результат. Точка используется, когда вы уверены, что какое-то значение присутствует в атрибуте, тогда как другой способ вы можете использовать, когда вы не уверены, будет ли оно неопределенным или какое-то значение будет там

Answer 3

Для вызова атрибутов используйте точку

console.log(file.height);