如何在JavaScript中获取图片真实宽高？返回0问题求解

嘿，这个问题我之前也碰到过——你之所以拿到的naturalWidth和naturalHeight都是0，核心原因是图片还没加载完成，你就急着去读取它的原始尺寸了。naturalWidth和naturalHeight这两个属性只有在图片完全加载（包括解码完成）后，才会返回正确的原始像素值，否则默认就是0。

下面给你几个实用的解决方案，帮你的detect方法正确返回布尔值：

方案1：监听图片的load事件（最稳妥的方式） #

把尺寸检测的逻辑放在图片的load事件回调里，确保只有图片加载完成后才执行判断：

function detect() {
  const image = new Image();
  // 替换成你实际使用的图片地址
  image.src = '你的图片URL';

  return new Promise((resolve) => {
    // 图片加载完成后执行
    image.onload = function() {
      console.log(image.naturalWidth); // 现在会输出275
      console.log(image.naturalHeight); // 现在会输出233
      // 根据你的需求返回布尔值，比如判断是否符合预期尺寸
      resolve(image.naturalWidth === 275 && image.naturalHeight === 233);
    };

    // 别忘了处理图片加载失败的情况
    image.onerror = function() {
      console.error('图片加载失败啦');
      resolve(false);
    };
  });
}

// 使用示例：调用detect方法并获取结果
detect().then(isValid => {
  console.log('检测结果：', isValid);
});

方案2：兼容缓存图片的情况 #

如果你的图片可能已经被浏览器缓存了，直接监听load事件可能不会触发（因为缓存的图片会立即加载完成），这时候可以先检查complete属性：

function detect() {
  const image = new Image();
  image.src = '你的图片URL';

  return new Promise((resolve) => {
    function checkImageSize() {
      // 确保图片已加载完成且尺寸有效
      if (image.complete && image.naturalWidth !== 0) {
        resolve(image.naturalWidth === 275 && image.naturalHeight === 233);
      }
    }

    // 先检查是否已经加载完成
    if (image.complete) {
      checkImageSize();
    } else {
      // 没加载完就等load事件
      image.onload = checkImageSize;
      image.onerror = () => resolve(false);
    }
  });
}

额外提醒 #

• naturalWidth和naturalHeight是只读属性，返回的是图片的原始像素尺寸，不受你给图片设置的CSS宽高影响。
• 如果你的图片是跨域资源，一定要确保服务器配置了CORS（跨域资源共享），否则浏览器出于安全限制，可能还是会返回0哦。

内容的提问来源于stack exchange，提问作者moses toh