如何通过JSZip将Blob图片URL转换为Zip文件

你需要先把Blob URL转换成Blob对象，再逐个添加到Zip中。以下是具体实现方案：

核心逻辑步骤 #

• 遍历你的Blob图片URL列表
• 通过fetch()获取每个URL对应的Blob对象
• 为每个图片指定合理的文件名
• 调用zip.file()将Blob添加到Zip包内

完整代码示例 #

// 示例Blob图片URL列表
const blobImageUrls = [
  'blob:http://localhost/93e9b867-ca7b-46cc-82fa-086b571b839e',
  'blob:http://localhost/xxx-xxx-xxx'
];

const zip = new JSZip();

// 异步处理并打包图片
const packImagesToZip = async () => {
  // 遍历所有图片URL
  for (let index = 0; index < blobImageUrls.length; index++) {
    const url = blobImageUrls[index];
    // 从Blob URL获取Blob对象
    const response = await fetch(url);
    const imageBlob = await response.blob();
    
    // 生成文件名：用序号+图片扩展名（从Blob的MIME类型提取）
    const fileExtension = imageBlob.type.split('/')[1];
    const fileName = `image_${index + 1}.${fileExtension}`;
    
    // 将Blob添加到Zip中
    zip.file(fileName, imageBlob);
  }

  // 生成Zip文件并触发下载（按需使用）
  const zipBlob = await zip.generateAsync({ type: 'blob' });
  const downloadAnchor = document.createElement('a');
  downloadAnchor.href = URL.createObjectURL(zipBlob);
  downloadAnchor.download = 'my_images.zip';
  downloadAnchor.click();
};

// 执行打包函数
packImagesToZip();

关键代码说明 #

• fetch(url)：浏览器允许直接通过fetch读取Blob URL对应的资源，返回的response可以转换为Blob
• imageBlob.type.split('/')[1]：从Blob的MIME类型（如image/png）中提取扩展名，确保文件名符合图片格式
• zip.file(fileName, imageBlob)：第一个参数是Zip包内显示的文件名，第二个参数是图片的Blob对象，完成添加操作

内容的提问来源于stack exchange，提问作者Vineet Kumar