naturalWidth 和naturalHeight 返回 0

Question

我有一个检查图像比例的代码。它可以工作十分之九甚至更多，但偶尔它不起作用，因为 img.naturalWidth 和 img.naturalHeight 返回 0。我可以理解，当我尝试获取图像时，图像没有加载。图像的高度和宽度，但我不知道为什么它很少发生。代码也在 reader.onload 里面，这是我在大多数在线文章中找到的解决方案。

isValidFileRatio(selectedFile: Blob, width: number, height: number): any {
return new Promise((resolve, reject) => {
  const reader = new FileReader();

  const img = new Image();
  img.src = window.URL.createObjectURL(selectedFile);

  reader.readAsDataURL(selectedFile);
  reader.onload = () => {
    const ratio = img.naturalWidth / img.naturalHeight;
    
    resolve(ratio >= 1 && ratio <= 2);
  };
  reader.onerror = (error) => reject(error);
});

}

任何解决方案或建议表示赞赏。谢谢

Answer 1

我认为

new FileReader()

没有用，它导致了这个错误。像这样更改您的代码：

isValidFileRatio(selectedFile: Blob, width: number, height: number): any {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = window.URL.createObjectURL(selectedFile);
        
        img.onload = () => {
            const ratio = img.naturalWidth / img.naturalHeight;

            resolve(ratio >= 1 && ratio <= 2);
        };
        img.onerror = (error) => reject(error);
    });