如何获取Base64图片宽高？辅助函数返回null的解决办法

这个问题的核心在于图片加载是异步操作——你当前的代码会在图片还没加载完成时就直接返回初始的null值，再加上代码里有个小笔误（把height错误赋值为img.width），自然拿不到正确的宽高。

问题根源拆解 #

当你执行img.src = image后，浏览器需要时间去加载解码图片，img.onload回调是在图片加载完成后才会触发的。但你的函数在设置完src后立刻就返回了{width, height}，这时候onload还没执行，所以变量还是初始的null。

修正方案：用Promise处理异步操作 #

因为图片加载是异步的，我们需要用Promise来封装这个逻辑，等待加载完成后再返回结果：

getDimensions(image: string): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = image;
    
    img.onload = () => {
      // 修正height的赋值错误，改为img.height
      resolve({ width: img.width, height: img.height });
    };

    // 添加错误处理，避免图片加载失败时一直处于等待状态
    img.onerror = (error) => {
      console.error('图片加载失败:', error);
      reject(error); // 或者根据业务需求返回默认值
    };
  });
}

调用方式 #

因为函数返回的是Promise，你需要用async/await或者.then()来获取结果：

方式1：async/await（推荐，代码更简洁）

// 确保调用代码在async函数内部
async fetchImageDimensions() {
  try {
    const dimensions = await this.getDimensions(base64Image);
    console.log('图片宽高:', dimensions);
    // 在这里处理拿到的宽高
  } catch (error) {
    console.error('获取宽高失败:', error);
  }
}

// 调用函数
this.fetchImageDimensions();

方式2：.then()链式调用

this.getDimensions(base64Image)
  .then(dimensions => {
    console.log('图片宽高:', dimensions);
    // 处理宽高逻辑
  })
  .catch(error => {
    console.error('获取宽高失败:', error);
  });

这样就能确保在图片加载完成后，再获取到正确的宽高值了。

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