前端传图片给多模态 Agent：压缩、预览、格式那些破事

最近给我们的智能体加了"传图问"功能------用户拍张照片，让它识别、分析、回答。听起来就是个 input file，真做起来全是琐碎的破事：图片太大传不动、格式五花八门、预览卡顿、横拍竖拍方向乱。这篇把前端这侧处理图片的脏活记一记。

第一关：用户的图片大得离谱

手机随手一拍就是 4MB、5000×4000 像素。直传有两个问题：上传慢，以及多模态接口对图片尺寸有上限，太大直接被拒。所以前端必须先压。

我用 canvas 做客户端压缩，限制最长边：

ini 复制代码

async function compress(file, maxEdge = 1568) {
  const bitmap = await createImageBitmap(file);
  let { width, height } = bitmap;

  if (Math.max(width, height) > maxEdge) {
    const ratio = maxEdge / Math.max(width, height);
    width = Math.round(width * ratio);
    height = Math.round(height * ratio);
  }

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d").drawImage(bitmap, 0, 0, width, height);

  return new Promise((resolve) =>
    canvas.toBlob(resolve, "image/jpeg", 0.85)
  );
}

maxEdge 这个值我查了下接的多模态模型推荐尺寸，长边压到 1500 左右识别效果和体积最平衡，再大纯属浪费带宽。0.85 的 jpeg 质量肉眼基本无损。

第二关：方向被转了 90 度

iPhone 横拍的照片，EXIF 里记着方向，但 canvas 画出来经常方向不对，识别时"猫"变"躺平的猫"。createImageBitmap 其实能帮你自动摆正：

csharp 复制代码

const bitmap = await createImageBitmap(file, {
  imageOrientation: "from-image", // 按 EXIF 自动旋转
});

加这一个参数省了我手动解析 EXIF 的功夫。早年我真的去引过 exif 解析库手动转 matrix，现在想想没必要。

第三关：格式杂。HEIC 是个刺头

安卓、微信导出的图大多是 jpg/png，好处理。但 iPhone 原图常是 HEIC ，浏览器很多不认，createImageBitmap 直接抛错。

我的处理：

javascript 复制代码

async function normalize(file) {
  if (file.type === "image/heic" || file.name.toLowerCase().endsWith(".heic")) {
    // 浏览器搞不定 heic，老实引转换库
    const { default: heic2any } = await import("heic2any");
    const blob = await heic2any({ blob: file, toType: "image/jpeg" });
    return new File([blob], "converted.jpg", { type: "image/jpeg" });
  }
  return file;
}

注意我用了动态 import------heic2any 体积不小，不传 HEIC 的用户没必要加载它，懒加载省首屏。

第四关：预览要快，别拿原图渲染

显示缩略图别直接把 5MB 原图塞进 <img src>，会卡。用 URL.createObjectURL 配压缩后的 blob，并且记得释放：

ini 复制代码

const url = URL.createObjectURL(compressedBlob);
imgEl.src = url;
imgEl.onload = () => URL.revokeObjectURL(url); // 防内存泄漏

revokeObjectURL 很多人忘了，连续传几十张图内存会涨得很难看。

怎么把图给到模型

接口一般支持两种：传 URL，或传 base64。小图我直接转 base64 内联：

ini 复制代码

const reader = new FileReader();
reader.onload = () => {
  send({ image: reader.result }); // data:image/jpeg;base64,...
};
reader.readAsDataURL(compressedBlob);

大图我会先传到对象存储拿个 URL 再给模型，避免 base64 把请求体撑爆。这个分界我大概卡在 1MB。

一个我偷懒没做的

多图同时传、传输进度条、失败重传------这些我们场景一次基本就传一张，我没做批量和断点续传，加个简单的"上传中"loading 顶着。该砍就砍，别为低频场景堆复杂度。

小结

传图给多模态，前端的活基本就是"把用户乱七八糟的图，收拾成模型能稳定吃下的干净输入"：压尺寸、正方向、统一格式、省内存。模型识别那侧我用讯飞，多模态能力现成、模型即服务不用自己部署，前端只管把图喂干净，分工很清爽。