使用JavaScript获取图片尺寸时返回undefined的问题

哈哈，这个问题我之前也踩过坑！你现在直接对图片路径字符串调用naturalWidth肯定会返回undefined的，原因很简单：naturalWidth是浏览器Image DOM对象的专属属性，普通的字符串可没有这个属性哦。

要正确获取图片的原始尺寸，你需要先创建一个Image实例，等图片加载完成后再去读取它的尺寸属性，具体步骤和代码如下：

• 先创建一个Image对象实例
• 给这个实例设置图片路径（src属性）
• 监听图片的load事件（因为图片加载是异步操作，必须等它加载完成才能拿到正确的尺寸）
• 在load回调里读取naturalWidth和naturalHeight

示例代码：

// 创建Image实例
const img = new Image();
// 设置图片路径
img.src = '/images/clouds.png';

// 等待图片加载完成后获取尺寸
img.onload = function() {
  console.log('图片原始宽度:', this.naturalWidth);
  console.log('图片原始高度:', this.naturalHeight);
};

// 可选：添加错误处理，防止图片加载失败
img.onerror = function() {
  console.error('哎呀，图片加载失败了，请检查路径是否正确！');
};

需要注意的是：如果不等待load事件就直接去读尺寸，此时图片可能还没加载完成，你得到的结果可能是0或者依然是undefined，所以一定要在load回调里处理哦。

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