如何编写不依赖image onload获取图片宽高的函数？

你的代码之所以时灵时不灵，偶尔返回0导致计算出错，核心原因是图片还没加载完成就去读取naturalWidth/naturalHeight：

• 每次调用getImageWidth或getImageHeight都会新建一个Image实例并设置src，而图片加载是异步操作，设置src后立刻读取宽高，此时图片大概率还在加载中，自然宽高还未就绪，所以返回0。
• 重复创建Image实例还会导致重复发起图片请求，浪费资源。

推荐修复方案：缓存实例+异步等待加载完成 #

用img.decode()方法等待图片解码完成（比onload更可靠），同时缓存同一个Image实例，确保只加载一次，用async/await获取宽高，不会出现作用域丢失的问题：

// 缓存图片实例，避免重复创建和加载
private imgInstance: HTMLImageElement | null = null;

// 初始化并确保图片加载完成
private async loadImage(): Promise<HTMLImageElement> {
  // 如果已有就绪的实例，直接返回
  if (this.imgInstance && this.imgInstance.complete) {
    return this.imgInstance;
  }

  const imgSrc = this.getImageSrc();
  const imgObj = new Image();
  imgObj.src = imgSrc;
  
  // 等待图片解码完成，确保宽高可用
  await imgObj.decode();
  
  this.imgInstance = imgObj;
  return imgObj;
}

getImageSrc() {
  const imgSrc = this.fileHandler(this.image._id, 'image');
  return imgSrc;
}

async getImageWidth(): Promise<number> {
  const img = await this.loadImage();
  return img.naturalWidth;
}

async getImageHeight(): Promise<number> {
  const img = await this.loadImage();
  return img.naturalHeight;
}

使用时只需要在需要宽高的地方用await获取：

// 示例：获取宽高并缩放canvas
async resizeCanvas() {
  const width = await this.getImageWidth();
  const height = await this.getImageHeight();
  // 这里可以安全使用宽高进行canvas缩放计算
  const scale = Math.min(canvas.width / width, canvas.height / height);
  // ...后续操作
}

备选方案：同步解析图片头信息（不推荐） #

如果实在不想用异步逻辑，可以通过同步XHR获取图片二进制数据，解析图片文件头的宽高信息（仅适合同域图片，且需要适配不同图片格式）。这种方法会阻塞主线程，影响页面性能，仅作参考：

getImageSizeSync(): {width: number, height: number} {
  const xhr = new XMLHttpRequest();
  // 同步请求，会阻塞主线程
  xhr.open('GET', this.getImageSrc(), false);
  xhr.responseType = 'arraybuffer';
  xhr.send();

  const buffer = new Uint8Array(xhr.response);
  let offset = 0;

  // 解析JPEG格式宽高（仅示例，需额外适配PNG、WebP等格式）
  if (buffer[offset] === 0xFF && buffer[offset+1] === 0xD8) {
    offset += 2;
    while (offset < buffer.length) {
      if (buffer[offset] === 0xFF) {
        const marker = buffer[offset+1];
        // 查找SOF系列标记（JPEG图像信息段）
        if (marker >= 0xC0 && marker <= 0xC3) {
          // 从文件头读取宽高
          const height = (buffer[offset+5] << 8) | buffer[offset+6];
          const width = (buffer[offset+7] << 8) | buffer[offset+8];
          return { width, height };
        }
        // 跳过当前数据段
        const segmentLength = (buffer[offset+2] << 8) | buffer[offset+3];
        offset += segmentLength + 2;
      } else {
        offset++;
      }
    }
  }
  throw new Error('无法解析图片尺寸');
}

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