💭 前言

在现代 Web 应用中，图片上传是一个高频场景。只是使用者直接从手机相册选取的照片动辄 5MB、10MB。直接上传不仅浪费带宽和 OSS 存储成本，更会导致移动端页面加载缓慢。

⁉️ 主要痛点

1. 图片体积大原始高清图体积巨大，后端处理压力大。
2. 裁剪需求不同业务对图片比例有严格要求。
3. 压缩画质难平衡固定压缩比可能导致小图变模糊，而大图依然超限。说起来，

🪾 方法流程图

使用者选择图片 → beforeUpload 拦截 → 进入裁剪窗口 → 获取裁剪 Blob → 递归渐进式压缩 → 上传接口

🖥️ 关键代码实现

. 渐进式压缩算法

不同于一次性压质。我们采用递归渐进式压缩如果图片体积超过目标阈值，则以 为步长降低质量，直到体积达标或达到画质底线。

/** * 渐进式压缩图片 * @param {Blob} blob 原始图片Blob * @param {Number} maxSize 目标大小 * @returns {Promise} 压缩后的Blob */zipImage { return new Promise => { // 如果原始大小已达标，直接返回 if { resolve;return，} const img = new Image;img.src = URL.createObjectURL;img.onload = => { const canvas = document.createElement;canvas.width = img.width;canvas.height = img.height;const ctx = canvas.getContext;ctx.drawImage;let quality =;// 初始质量 const tryZip = => { // 使用 canvas.toBlob 进行压质 canvas.toBlob => { // 判定：体积达标 或 质量降至底线则停止递归 if { resolve;} else { quality -=;// 步长降低 tryZip;} },'image/jpeg',quality);}，tryZip;}，img.onerror = => resolve;// 异常处理：返回原图 });话说回来，}

. 集成 vue-cropper 获取裁剪结果

在使用者点击“确认上传”时先调用裁剪库 API。 再进入压缩逻辑：

upload { // . 获取裁剪后的 Blob 对象  this.$refs.cropper.getCropBlob => { const targetLimit = this.maxSize *;// 换算为字节 // . 判断是否需要压缩 if { this.uploadApi;return，}
try { // . 执行渐进式压缩 const zipBlob = await this.zipImg;// 计算压缩率 const ratio = / blob.size * ).toFixed;this.$message.success;this.uploadApi;} catch { this.uploadApi;// 降级处理：压缩失败则直接上传 } });}

. 上传与 UI 反馈

在上传过程中，动态重命名文件为 .jpg 以确保压缩协议生效：

uploadApi { const formData = new FormData;// 格式化文件名，强制后缀为 .jpg formData.append;request.n.finally => { //... });}

🐣 调整细节分享

. 为什么选择 作为画质底线？

经过测试，大部分拍摄照片在 quality= 时在移动端小屏幕上依然具有较好的观感。说起来，如果低于这个值，会出现明显的马赛克色块。

. enlarge 参数的陷阱

在使用 vue-cropper 时属性 enlarge 建议设为。

• 若设为 裁剪框 200px 会强制输出 2000px，图片体积会呈几何倍数增长。
• 若需要高分屏适配建议设为，即可。

. Canvas 的跨域处理

如果 vue-cropper 加载的是回填的远程图片，Canvas 导出时可能会触发“被污染的画布”安全限制。此时需要确保服务器开启了 CORS，且在 Image 对象创建时设置 img.crossOrigin = 'Anonymous'。说起来，

🚩

通过这套逻辑。我们实现了：

• 带宽节省平均图片体积从 4MB 降至约到 MB左右，缩减率> %。
• 使用者无感渐进式压缩在毫秒级完成，使用者体验流畅。
• 成本控制极大地降低了 CDN 带宽支出。

**如果是你，你会选择在前端压缩还是后端处理？欢迎在评论区交流，**