图片压缩上传需平衡画质、体积与兼容性，核心是canvas降采样+toblob控质+file api封装，须检测api支持、分步缩放、保留元信息并兼顾低端设备。
图片压缩上传不是简单调用 resize 就完事，关键在于平衡画质、体积和兼容性。核心思路是：用 Canvas 重绘降采样 + toBlob 控制质量 + File API 构造新文件上传。
判断是否支持现代压缩能力
不是所有浏览器都支持 toBlob 或高质量压缩参数。先检测关键 API 是否可用：
-
File API：检查
window.File && window.FileReader -
Canvas toBlob：检查
HTMLCanvasElement.prototype.toBlob（IE 不支持，需 fallback） - ImageBitmap（可选）：用于更精准的解码控制，但兼容性较新（Chrome 59+、Firefox 60+）
按目标尺寸缩放 + 质量可控压缩
原始图可能高达几 MB，直接 canvas 绘制易 OOM 或卡顿。推荐分两步处理：
- 先读取图片宽高，计算目标尺寸（如最大边 ≤ 1200px），保持宽高比
- 创建 canvas，设置 width/height 为目标尺寸，用
ctx.drawImage(img, 0, 0, targetW, targetH)绘制 - 调用
canvas.toBlob(callback, 'image/jpeg', 0.8)，第三个参数即压缩质量（0–1），0.7–0.8 是画质与体积的较好折中
构造标准 File 对象以便上传
toBlob 返回的是 Blob，后端通常期望标准 File 实例（含 name、lastModified 等属性）。需手动包装：
- 用
new File([blob], originalFile.name, { type: 'image/jpeg', lastModified: Date.now() }) - 注意：若原图是 PNG 且含透明通道，强制转 JPEG 会丢失透明度；此时应判断
img.src.startsWith('data:image/png')，或保留 PNG 格式并设 quality=0.9+ - 上传时仍可用 FormData.append('file', compressedFile)，与普通文件上传完全一致
兼顾低端设备与大图场景
移动端或老旧设备上，大图（如 4000×3000）直接绘制可能失败或极慢。可加一层安全控制：
- 限制最大输入尺寸：超过 4096px 的长边，先用
createImageBitmap（如有）或分块 decode 解析 - 添加超时与错误降级：canvas 绘制超时（如 3s）则改用 URL.createObjectURL 直传原图，并提示“已跳过压缩”
- 对 WebP 支持良好的环境（Chrome/Firefox/Edge），可尝试
toBlob(cb, 'image/webp', 0.8)，体积通常比 JPEG 小 25%–30%
不复杂但容易忽略细节：压缩不是越小越好，要留出视觉可接受的余量；File 对象的元信息不能丢，否则后端无法正确识别文件名；移动端尤其要注意内存释放——用完 canvas 和 image 后及时赋 null。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
