如何從 javascript 中的 object 獲取寬度和高度值

Question

我正在使用 dropzone 和cropper 上傳文件。 我不知道如何引用所選圖像的寬度和高度。

這是相關代碼：

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(file) 行輸出如下：

所以它有高度和寬度。

遍歷文件 output 的屬性：

有人知道如何在這里訪問高度和寬度嗎？

謝謝。

編輯

感謝@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 '+width); 在 console.log('1 '+width); 之前輸出

我可以讓它等待嗎？

編輯 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);

Answer 3

要訪問高度和寬度，您可以使用它們中的任何一個。

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

或者

console.log(file.height);

兩者都會給出相同的結果。 當您確定屬性中存在某些值時使用點，而當您不確定它是否未定義或是否存在某些值時可以使用其他方式