Image对象naturalWidth/naturalHeight偶现返回0问题求助

你遇到的偶发问题，本质是FileReader的加载和图片元素的加载是两个完全独立的异步流程：

• FileReader的onload触发仅表示文件已被转成DataURL，但图片元素可能还没完成解码加载
• 当FileReader的回调先于图片加载完成时，img.naturalWidth和img.naturalHeight自然会返回0

而且你的代码里用createObjectURL给图片赋值后，又用FileReader转DataURL，这一步完全是多余的，反而增加了不必要的异步竞争。

直接监听图片元素的onload事件来获取尺寸，同时处理图片加载失败的场景，代码可以这样修改：

isValidFileRatio(selectedFile: Blob, width: number, height: number): Promise<boolean> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    
    // 监听图片加载完成事件
    img.onload = () => {
      // 释放ObjectURL，避免内存泄漏
      window.URL.revokeObjectURL(img.src);
      const ratio = img.naturalWidth / img.naturalHeight;
      resolve(ratio >= 1 && ratio <= 2);
    };
    
    // 监听图片加载失败（比如文件损坏、不是有效图片）
    img.onerror = () => {
      window.URL.revokeObjectURL(img.src);
      reject(new Error('图片加载失败，无法获取尺寸'));
    };
    
    // 设置图片源
    img.src = window.URL.createObjectURL(selectedFile);
  });
}

• 一定要调用URL.revokeObjectURL，否则Blob对象会一直占用内存，尤其是频繁处理图片时容易导致内存泄漏
• 如果需要兼容极旧浏览器（比如IE11），可以保留FileReader的方式，但依然要等待图片加载完成，不能依赖FileReader的onload
• 若要限制图片文件类型，可以先通过selectedFile.type判断是否为image/*类型，提前过滤非图片文件

内容的提问来源于stack exchange，提问作者Abhinav Singh