图片本地压缩

前端图片体积失控的代价

在 CRM 系统中上传名片、执照或现场照片时，图片体积过大是常见问题。一张手机拍摄的原图动辄 5MB 以上，不仅拖慢上传速度，还可能触发后端接口的请求体大小限制，导致上传失败或超时。传统方案依赖后端转码，但这意味着额外的服务器开销、等待时间和存储成本。

纯前端压缩的实现路径

该技能基于 browser-image-compression 库（或等价的 canvas 方案），在用户选择文件后立即在浏览器端完成压缩，无需将原图发送到服务器。核心参数包括：

• maxSizeMB：压缩后目标体积，默认 0.8～1MB
• maxWidthOrHeight：最长边像素限制，默认 1920

实现流程分为三个步骤：

1. 压缩函数与进度回调：调用库的压缩接口，通过 onProgress 回调实时展示压缩进度
2. 结果回显：压缩完成后显示原大小、新大小和耗时；失败时返回可读错误信息
3. 上传衔接：将压缩后的图片直接封装为 FormData，衔接后续上传逻辑

适用边界与注意点

该方案适用于常见格式（JPEG、PNG、WebP）。但对于 HEIC 等浏览器兼容性有限的格式，需要提前处理或提示用户转换格式。此外，部分压缩库会剥离 EXIF 元数据（如 GPS、拍摄参数），应在用户界面中明确告知这一行为，避免静默丢失信息。

对于超过 2MB 的大图，建议在开发阶段进行自测，确保压缩效果稳定在目标体积附近。