如何从含img.onload异步事件的getImgSize函数返回height值？

云原生阿岚

2026-8-18

解决异步获取图片height的问题

因为img.onload是异步事件，无法直接同步返回图片的height值，必须用异步方式处理，下面是几种可行的方案：

方案1：使用回调函数

修改函数，传入一个回调函数，在图片加载完成后调用回调返回height：

function getImgSize(imgSrc, callback) {
  const img = new Image();

  img.onload = function() {
    callback(null, img.height);
  };
  // 处理图片加载失败的情况
  img.onerror = function(err) {
    callback(err);
  };
  img.src = imgSrc; // 原代码里的`url`应为传入的参数`imgSrc`
}

// 调用示例
getImgSize('your-image-url.jpg', (err, height) => {
  if (err) {
    console.error('图片加载失败:', err);
    return;
  }
  console.log('图片高度:', height);
});

方案2：使用Promise（推荐）

将函数封装为返回Promise的形式，更符合现代JavaScript异步处理习惯：

function getImgSize(imgSrc) {
  return new Promise((resolve, reject) => {
    const img = new Image();

    img.onload = function() {
      resolve(img.height);
    };
    img.onerror = function(err) {
      reject(new Error('图片加载失败: ' + err.message));
    };
    img.src = imgSrc;
  });
}

// 调用示例
getImgSize('your-image-url.jpg')
  .then(height => {
    console.log('图片高度:', height);
  })
  .catch(err => {
    console.error(err);
  });

方案3：结合async/await使用

如果在async函数中调用，可以用await简化异步代码的写法：

async function getImageHeight() {
  try {
    const height = await getImgSize('your-image-url.jpg');
    console.log('图片高度:', height);
  } catch (err) {
    console.error(err);
  }
}

getImageHeight();