前端批量下载图片并统一转换格式的最佳实践

在现代 Web 应用中，用户经常有批量下载图片的需求。比如：将页面上的多张图片打包成 zip 文件下载，或者统一转换为更高效的图片格式（如 webp、jpeg）以节省存储和带宽。本文将带你深入了解如何用 JavaScript 实现这一功能，并重点讲解 createImageBitmap 的优势和使用场景。

需求分析

假设我们有一组图片 URL，用户希望一键下载所有图片，并且希望所有图片都被统一转换为 webp 或 jpeg 格式，最后打包成 zip 文件。

技术选型

• JSZip：用于在前端生成 zip 文件。
• canvas：用于图片格式转换。
• createImageBitmap：高效解码图片，便于绘制到 canvas。
• fetch：获取图片二进制数据。

实现思路

1. 批量 fetch：将每个图片 URL 对应的二进制数据（Blob）拉取到前端。
2. 解码为 ImageBitmap：通过 createImageBitmap(blob) 异步解码，不阻塞主线程。
3. 绘制与格式转换：在（Offscreen）Canvas 上用 drawImage 渲染图像，再用 toBlob 或 convertToBlob 导出指定格式（webp/jpeg）和质量。
4. 打包 ZIP：借助 JSZip，按文件名和格式将每个 Blob 添加到 ZIP。
5. 触发下载：生成 ZIP Blob 后，构造临时链接  并自动点击下载。

关键代码实现

import JSZip from 'jszip';

// 批量下载并转换图片为指定格式
export const downloadImagesZip = (images: string[], format: 'webp' | 'jpeg' = 'webp') => {
  const zip = new JSZip();
  const folder = zip.folder('images');

  Promise.all(
    images.map(async imgUrl => {
      // 1. 获取图片 Blob
      const res = await fetch(imgUrl);
      const blob = await res.blob();

      // 2. 解码为 ImageBitmap
      const imageBitmap = await createImageBitmap(blob);

      // 3. 绘制到 canvas 并导出为目标格式
      const canvas = document.createElement('canvas');
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
      const ctx = canvas.getContext('2d');
      ctx?.drawImage(imageBitmap, 0, 0);

      // 4. 转为 webp 或 jpeg Blob
      const outBlob: Blob = await new Promise(resolve =>
        canvas.toBlob(b => resolve(b as Blob), `image/${format}`)
      );

      // 5. 添加到 zip
      const name = imgUrl.split('/').pop()?.replace(/\\.\\w+$/, '') || 'image';
      folder?.file(`${name}.${format}`, outBlob);
    })
  ).then(() => {
    // 6. 生成并下载 zip
    zip.generateAsync({ type: 'blob' }).then(content => {
      const a = document.createElement('a');
      a.href = URL.createObjectURL(content);
      a.download = `images.zip`;
      a.click();
      URL.revokeObjectURL(a.href);
    });
  });
};

为什么要用 createImageBitmap？

1. 性能更优

createImageBitmap 是异步的，不会阻塞主线程，适合批量处理图片。相比 <img> 标签+onload 的传统方式，解码速度更快，体验更流畅。

2. 代码更简洁

无需创建和管理 <img> 元素，也不用处理 onload、URL 回收等繁琐细节。直接 await 得到 bitmap，马上就能绘制到 canvas。

3. 灵活性更高

支持多种图片源（Blob、File、ImageData、Canvas等），不仅限于 URL。

4. 避免 DOM 污染

不需要在页面上插入临时 <img> 元素，减少内存泄漏和 DOM 污染的风险。

传统方式（不推荐）：

const imgEl = new Image();
imgEl.onload = () => {
  ctx.drawImage(imgEl, 0, 0);
};
imgEl.src = URL.createObjectURL(blob);

推荐方式（现代浏览器）：

const imageBitmap = await createImageBitmap(blob);
ctx.drawImage(imageBitmap, 0, 0);

兼容性说明

• createImageBitmap 支持主流现代浏览器（Chrome、Firefox、Edge、Safari）。
• 如果需要兼容 IE 或极老旧浏览器，可以降级为 <img> 标签方式，但建议优先使用 createImageBitmap。

总结

通过 createImageBitmap + canvas + JSZip，我们可以高效地实现前端批量图片下载与格式统一转换。这样不仅提升了用户体验，还能有效节省带宽和存储空间。