💭 前言

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

本文将分享一个基于 vue-cropper 和 Canvas API 封装的通用组件逻辑，实现**“用户自主裁剪 + 自动阈值检测 + 渐进式无损压质”**的完整全链路方案。

⁉️ 核心痛点

1. 图片体积大：原始高清图体积巨大，后端处理压力大。
2. 裁剪需求：不同业务（如头像、封面）对图片比例有严格要求。
3. 压缩画质难平衡：固定压缩比（如 quality=0.5）可能导致小图变模糊，而大图依然超限。

🪾 解决方案流程图

用户选择图片 -> beforeUpload 拦截 -> 进入裁剪窗口 -> 获取裁剪 Blob -> 递归渐进式压缩（Canvas）  -> 上传接口

🖥️ 关键代码实现

1. 渐进式压缩算法（核心逻辑）

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

/**
 * 渐进式压缩图片
 * @param {Blob} blob 原始图片Blob
 * @param {Number} maxSize 目标大小（单位：byte）
 * @returns {Promise<Blob>} 压缩后的Blob
 */
zipImage(blob, maxSize) {
  return new Promise((resolve) => {
    // 如果原始大小已达标，直接返回
    if (blob.size <= maxSize) {
      resolve(blob);
      return;
    }

    const img = new Image();
    img.src = URL.createObjectURL(blob);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      let quality = 0.9; // 初始质量
      const tryZip = () => {
        // 使用 canvas.toBlob 进行压质
        canvas.toBlob((zipedBlob) => {
          // 判定：体积达标 或 质量降至底线（0.3）则停止递归
          if (zipedBlob.size <= maxSize || quality <= 0.3) {
            resolve(zipedBlob);
          } else {
            quality -= 0.1; // 步长降低
            tryZip();
          }
        }, 'image/jpeg', quality);
      };

      tryZip();
    };
    img.onerror = () => resolve(blob); // 异常处理：返回原图
  });
}

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

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

upload() {
  // 1. 获取裁剪后的 Blob 对象 <vue-cropper ref="cropper" .../>
  this.$refs.cropper.getCropBlob(async (blob) => {
    const targetLimit = this.maxSize * 1024; // 换算为字节

    // 2. 判断是否需要压缩
    if (blob.size <= targetLimit) {
      this.uploadApi(blob);
      return;
    }

    try {
      // 3. 执行渐进式压缩
      const zipBlob = await this.zipImg(blob, targetLimit);
      
      // 计算压缩率（用于前端反馈）
      const ratio = ((blob.size - zipBlob.size) / blob.size * 100).toFixed(1);
      this.$message.success(`已自动优化，体积缩减 ${ratio}%`);
      
      this.uploadApi(zipBlob);
    } catch (error) {
      this.uploadApi(blob); // 降级处理：压缩失败则直接上传
    }
  });
}

3. 上传与 UI 反馈

在上传过程中，动态重命名文件为 .jpg 以确保压缩协议生效（PNG 不支持 quality 参数压缩）：

uploadApi(blob) {
  const formData = new FormData();
  // 格式化文件名，强制后缀为 .jpg
  formData.append('file', blob, 'test.jpg');

  request({
    url: '/api/upload',
    method: 'POST',
    data: formData
  }).then(res => {
      // 更新 fileList 逻辑...
  }).finally(() => {
      //...
  });
}

🐣 优化细节分享

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

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

2. enlarge 参数的陷阱

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

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

3. Canvas 的跨域处理

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

🚩 总结

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

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

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

注：本文代码基于 Vue 2.x + vue-cropper 编写，Vue 3 项目同理。