如何在 javascript 中从此对象获取宽度和高度值

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) 行输出如下：

所以它有高度和宽度。

文件属性的循环输出如下：

有人知道如何在这里获取高度和宽度吗？

谢谢。

编辑

感谢@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);

两者都会给出相同的结果。 当您确定属性中存在某些值时使用点，而当您不确定它是否未定义或是否存在某些值时可以使用其他方式