TypeScript中获取上传图片/Blob宽高：无URL仅UUID场景

方案一：上传至AWS前直接在前端获取 #

通过浏览器原生API读取本地上传文件，借助Image对象加载后直接获取宽高，无需上传至服务器。

示例代码：

// 监听文件上传输入的change事件
const fileInput = document.getElementById('image-upload') as HTMLInputElement;
fileInput.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (!file || !file.type.startsWith('image/')) {
    console.error('请选择有效的图片文件');
    return;
  }

  try {
    const image = await loadImageFromFile(file);
    console.log('图片宽高：', image.width, image.height);
  } catch (err) {
    console.error('加载图片失败：', err);
  }
});

// 封装加载图片的工具函数
function loadImageFromFile(file: File): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 使用createObjectURL比FileReader更高效
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      URL.revokeObjectURL(img.src); // 释放内存
      resolve(img);
    };
    img.onerror = reject;
  });
}

方案二：从AWS获取Blob后获取宽高 #

利用API返回的UUID构造请求获取AWS存储的Blob，再将Blob转为可加载的URL，通过Image对象读取宽高。

示例代码：

// 假设通过UUID获取Blob的请求函数（需替换为实际AWS请求逻辑）
async function getImageBlobFromAWS(uuid: string): Promise<Blob> {
  const response = await fetch(`/api/aws/image/${uuid}`, {
    method: 'GET',
    headers: {
      // 按需添加认证头，比如AWS签名、Token等
    }
  });
  if (!response.ok) throw new Error('获取Blob失败');
  return await response.blob();
}

// 通过Blob获取图片宽高
async function getImageSizeFromBlob(blob: Blob): Promise<{width: number, height: number}> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = URL.createObjectURL(blob);
    img.onload = () => {
      URL.revokeObjectURL(img.src);
      resolve({width: img.width, height: img.height});
    };
    img.onerror = reject;
  });
}

// 使用示例
async function fetchAndGetSize(uuid: string) {
  try {
    const blob = await getImageBlobFromAWS(uuid);
    const size = await getImageSizeFromBlob(blob);
    console.log('图片宽高：', size.width, size.height);
  } catch (err) {
    console.error('获取图片尺寸失败：', err);
  }
}

注意事项 #

• 若从AWS跨域获取Blob，需确保服务器配置了正确的跨域资源共享（CORS）规则，否则Image对象会加载失败。
• 提前过滤非图片文件，可通过file.type判断，同时在img.onerror中捕获加载错误。

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