使用JavaScript和Canvas压缩图片大小的实现方法

前端压缩图片的核心原理，是通过浏览器提供的文件读取接口将原始图片装载为内存中的图像对象，计算出缩放后的目标宽高，利用 HTML5 Canvas 的二维绘图上下文将图像重绘在尺寸更小的画布上，最后通过导出 API 并配合质量参数生成体积更小的二进制文件。这种方式能够在用户上传前显著降低网络传输负载与后端服务器的存储开销。

一、Canvas 图片压缩的核心原理

在前端环境中，文件体积由图片的“像素总量”以及“编码算法的压缩率”两个维度共同决定。直接在客户端修改文件的字节并不现实，因此标准的压缩流程分为两个维度的处理：

• 分辨率下采样（尺寸缩放）：高像素手机拍摄的照片往往宽度达到 4000 像素以上。将图像等比重采样到例如 1920 像素宽的 Canvas 上，像素总量将呈二次方衰减，这是削减文件体积最立竿见影的手段。
• 频域有损压缩（质量因子）：Canvas 的 toBlob() 方法在导出为 image/jpeg 或 image/webp 格式时，支持传入 0 到 1 之间的质量参数（quality），底层编码器会丢弃人眼不易察觉的高频细节，进一步压缩字节。

二、核心操作步骤与完整代码实现

实现前端压缩需严格遵循五个核心步骤：获取文件、构建虚拟图像、计算等比缩放、画布重绘以及导出 Blob。我们将其封装为一个易于复用的异步 Promise 函数。

步骤 1：读取文件并加载为图片对象

通过文件输入框获取 File 对象后，推荐使用 URL.createObjectURL(file) 生成临时内存指针，其性能优于将大图整体转换为 Base64 的 FileReader.readAsDataURL()，能有效减少主线程内存激增。

步骤 2：保持宽高比计算目标尺寸

为防止图片拉伸失真，必须依据最大限制宽度与高度计算等比例缩放系数。若图片原始宽高均未超过设定上限，则保持原始尺寸不变。

步骤 3：离屏 Canvas 绘制与透明度补偿

创建一个不挂载到 DOM 树的 document.createElement('canvas')，将其宽高设置为目标尺寸。由于 JPEG 格式不支持透明通道，若原图含有透明区域（如 PNG 图标），直接导出 JPEG 会使透明区域变为黑底。因此在绘制图像前，应当先填充一层白色矩形底色。

步骤 4：调用 toBlob 异步导出

避免使用同步的 canvas.toDataURL()，因为它会产生长字符串并阻塞主线程，还会额外增加约 33% 的 Base64 传输体积开销。优先使用原生的 canvas.toBlob() 异步获取二进制 Blob 对象。

完整实现代码

/**
 * 使用 JavaScript 和 Canvas 压缩图片
 * @param {File|Blob} file 原始图片文件
 * @param {Object} options 配置项
 * @param {number} [options.maxWidth=1920] 最大限制宽度
 * @param {number} [options.maxHeight=1080] 最大限制高度
 * @param {number} [options.quality=0.8] 压缩质量 (0.1 - 1.0)
 * @param {string} [options.mimeType='image/jpeg'] 输出格式
 * @returns {Promise<Blob>} 压缩后的 Blob 对象
 */
function compressImage(file, options = {}) {
  const {
    maxWidth = 1920,
    maxHeight = 1080,
    quality = 0.8,
    mimeType = 'image/jpeg'
  } = options;

  return new Promise((resolve, reject) => {
    // 基础参数与类型检查
    if (!file || !(file instanceof Blob)) {
      return reject(new Error('输入参数必须是有效的 File 或 Blob 对象'));
    }

    // 生成内存对象地址
    const objectUrl = URL.createObjectURL(file);
    const img = new Image();

    img.onload = () => {
      // 无论成功与否，尽早释放 ObjectURL
      URL.revokeObjectURL(objectUrl);

      let originWidth = img.naturalWidth;
      let originHeight = img.naturalHeight;

      // 计算等比例缩放后的尺寸
      let targetWidth = originWidth;
      let targetHeight = originHeight;

      if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
          targetWidth = maxWidth;
          targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
          targetHeight = maxHeight;
          targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
      }

      // 创建离屏 Canvas 并绘制
      const canvas = document.createElement('canvas');
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      const ctx = canvas.getContext('2d');

      if (!ctx) {
        return reject(new Error('无法创建 Canvas 2D 上下文'));
      }

      // 若导出为 JPEG，先填充白色背景，防止 PNG 透明底转为黑块
      if (mimeType === 'image/jpeg') {
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, targetWidth, targetHeight);
      }

      // 绘制缩放后的图像
      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

      // 异步导出为目标 Blob
      canvas.toBlob(
        (blob) => {
          // 清理 Canvas 引用
          canvas.width = 0;
          canvas.height = 0;

          if (blob) {
            resolve(blob);
          } else {
            reject(new Error('Canvas toBlob 导出失败'));
          }
        },
        mimeType,
        quality
      );
    };

    img.onerror = (err) => {
      URL.revokeObjectURL(objectUrl);
      reject(new Error('图片加载失败，请确认文件是否为合法图像格式'));
    };

    img.src = objectUrl;
  });
}

三、常见误区与底层机制辨析

在实际开发中，关于 Canvas 压缩存在若干看似符合直觉却容易导致性能问题或逻辑漏洞的误区，理解其成立的边界条件尤为关键。

误区一：只要调低 quality 参数，所有图片格式都能被压缩

辨析：许多初学者发现将 PNG 图片传入压缩函数后，即使设置了 quality = 0.1，导出的文件不仅没有变小，有时反而体积变大。原因在于 PNG 是一种无损压缩格式。W3C 规范中明确规定：当 toBlob() 或 toDataURL() 的 MIME 类型为 image/png 时，浏览器的底层编码器会直接忽略传入的 quality 参数。如果需要对原本是 PNG 的大图进行质量压缩，必须将其格式转为 image/jpeg 或 image/webp；但同时必须注意，JPEG 不支持透明度通道，原本透明的地方若不预先填充白底，直接导出将呈现为全黑色。

误区二：使用 canvas.toDataURL() 比 toBlob() 更好用

辨析：toDataURL() 输出的是形如 data:image/jpeg;base64,... 的字符串，虽然能直观赋值给 <img src>，但在面对 2MB 以上图片时存在两大硬伤：

1. 主线程卡顿：toDataURL() 是完全同步的 CPU 密集型调用，在移动端低端设备上可导致界面卡死数百毫秒。而 toBlob() 内部是异步并发执行的，对页面响应性极好。
2. 网络负荷增加：Base64 字符串比原生二进制数据体积大约高出 33%。通过 FormData 上传原始二进制 Blob，能节约三分之一的网络上行带宽。

特性对比	canvas.toBlob()	canvas.toDataURL()
执行方式	异步非阻塞 (Callback)	同步阻塞主线程
输出格式	二进制 Blob (可直接转 File)	ASCII Base64 字符串
传输体积效率	100% 原始字节	膨胀约 133% (+33%)
内存占用	低，由系统底层托管	高，大字符串占用 V8 堆内存

四、进阶场景：二分法逼近目标体积与边界防护

很多业务需求并非单纯“设置一个固定质量”，而是明确要求“将图片压缩在指定大小以内（例如 300KB）”。由于不同画面的纹理复杂度差异巨大，相同 quality 参数下的体积无法预知。为此，可在尺寸已经缩放到合理阈值后，通过二分法迭代调整 quality 参数进行动态收敛。

移动端与大图内存边界限制

在 iOS Safari 等移动端浏览器中，Canvas 存在严苛的最大像素限制（单画布通常不能超过 16777216 像素，即 4096×4096）。如果用户上传一张全景大图，未经限制直接按原图尺寸初始化 Canvas，会触发系统静默 crash，导致画布变成全白或页面崩溃刷新。因此在第一步尺寸换算时，强制设立 maxWidth = 2048 是防止移动端崩溃的坚固防线。

五、总结

使用 JavaScript 和 Canvas 进行图片压缩，是现代 Web 前端提升用户上传体验与优化网络性能的基础设施级技术。其核心在于通过分辨率等比下采样结合有损编码格式的质量衰减实现体积的双重控制。在工程落地时，务必警惕 PNG 透明通道变黑、异步 toBlob 代替同步 toDataURL、移动端画布面积上限以及 ObjectURL 的显式内存释放，从而构建稳健高效的前端图片压缩管道。