通过输入获取图像的比率[Javascript]

我已经为以下问题挣扎了好几个小时： 我通过输入字段接收图像，需要验证比率是否在1.90和1.92之间。 我需要做的是创建一个阅读器，创建一个图像，从加载的图像中获取宽度和高度，然后返回true/false

现在，如前所述，文件需要加载时间，因此我需要一些异步处理的方法。 不幸的是，我是一个完全的承诺/异步初学者，因此需要一些主要的帮助

以下部分只是我的功能链的开始-我检查是否上传了图像（选中单选按钮）

... 
if (document.editWeb.radio_share[1].checked || document.editWeb.radio_share[2].checked) {
        let promise = processFile();
        promise.then(function(data){
            if (!data){return false;}
        });
}
...

我的processFile函数。 据我所知，这返回了一个承诺，这就是为什么我试图在上面的代码中截取承诺，并为我得到的“数据”返回一个false

async function processFile(){
    try {
        let contentBuffer = await getReader();
        return new Promise((resolve, reject) => {
            let img = new Image;
            img.onload = () => {
            let ratio = img.width / img.height;
                if (ratio > 1.92 ||ratio < 1.90 ){
                    resolve(false);
                }else {
                    resolve(true);
                }

            };

            console.log(contentBuffer);
        })

    } catch(err) {
        console.log(err);
    }

}

作为后续行动： 所有这一切都被召集进来了

<input id="saveAndStay" type="submit" name="buttonSaveAndStay" onclick="return checkRequirements(lang , data")>

需要注意的重要一点是，如果数据返回false，checkRequirements也应该返回false，以便停止向服务器发送请求，并用“此图像的比率错误”来提醒用户

---

我希望这能澄清问题。

您忘记了

processFile

函数中最重要的部分：）

工作演示：

var fileInput=document.getElementById（“共享文件”）；
fileInput.addEventListener（'change'，function（）{
如果（“某些框被选中了等等”）{
processFile（）
。然后（确定=>{
如果（！ok）{
警报（“比率需要在1.90和1.92之间”）；
}否则{
警惕（“一切正常！”）；
}
});
}
});
函数processFile（）{
返回getReader（）
。然后（数据URL=>{
返回新承诺（（解决、拒绝）=>{
const img=新图像；
img.onload=（）=>{
让压比=img.宽度/img.高度；
分辨率（比值=1.90）；
};
img.onerror=拒绝；
img.src=数据URL；
});
}).catch（错误=>{
控制台错误（err）；
返回false；
});
}
函数getReader（）{
const x=fileInput.files[0]；
返回新承诺（（解决、拒绝）=>{
const reader=new FileReader（）；
reader.onload=（e）=>resolve（e.target.result）；
reader.onerror=拒绝；
reader.readAsDataURL（x）；
})
}

您可以尝试上载的演示文件：

我尝试剪掉这段代码，但它从未提醒客户。我可能需要说的是，所有这些都发生在onclick函数中，我将更新代码以获得更好的可见性。我认为这可能会有帮助。类似于（伪代码）的东西：

函数checkRequirements（）{yoursyncProcess（）。然后（ok=>{if（ok）{myForm.submit（）；}否则{alert（'invalid'）；}}}）；return false；}

无论发生什么情况，只要异步进程说一切正常，就立即开始工作。谢谢你的帮助！酷

<input id="saveAndStay" type="submit" name="buttonSaveAndStay" onclick="return checkRequirements(lang , data")>

function checkRequirements(lang , data) {
...
if (document.editWeb.radio_share[1].checked === true || document.editWeb.radio_share[2].checked) {
        let promise = processFile();
        promise.then(function(data){
            if (!data){return false;}
        });
    }
}

}

img.src = contentBuffer;