如何使用JSZip与JavaScript压缩文件输入元素中的图片？已尝试代码但未生效求解决方案

我看你现在的代码只是把原图片直接转成DataURL塞进Zip里，并没有对图片本身做压缩处理，所以才没达到预期的压缩效果。咱们得先把图片的体积真正压缩下来，再打包进Zip，用Canvas就能轻松实现这个需求，具体步骤和代码如下：

核心思路 #

先通过Canvas对图片进行质量/尺寸压缩，生成体积更小的Blob，再把这个压缩后的Blob添加到Zip文件中，而不是直接用原文件的内容。

完整实现代码 #

HTML部分 #

<input type="file" id="id1" style="border-radius: 0.1px; width: 40%;" accept="image/*">
<button id="compressAndZip">压缩并打包</button>

JavaScript部分 #

// 确保已经引入了JSZip库（比如通过script标签引入）
const input = document.getElementById("id1");
const zipBtn = document.getElementById("compressAndZip");
let selectedFile = null;

// 先获取选中的图片文件
input.addEventListener("change", (e) => {
  selectedFile = e.target.files[0];
});

zipBtn.addEventListener("click", async () => {
  if (!selectedFile) {
    alert("请先选择一张图片");
    return;
  }

  // 1. 读取图片文件并加载到Image对象
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      // 2. 创建Canvas并绘制压缩后的图片
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      
      // 可以调整尺寸来压缩（比如缩放到原尺寸的80%）
      const scale = 0.8;
      canvas.width = img.width * scale;
      canvas.height = img.height * scale;
      
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      
      // 3. 将Canvas导出为Blob（这里可以调整quality参数控制质量，0-1之间）
      canvas.toBlob(async (blob) => {
        const zip = new JSZip();
        // 4. 将压缩后的Blob添加到Zip中
        zip.file("compressed_picture.png", blob);
        
        // 5. 生成Zip文件并下载
        const zipContent = await zip.generateAsync({type: "blob"});
        const url = URL.createObjectURL(zipContent);
        const a = document.createElement("a");
        a.href = url;
        a.download = "compressed_images.zip";
        a.click();
        URL.revokeObjectURL(url);
      }, "image/png", 0.7); // 第三个参数是质量，0.7表示70%质量，值越小压缩率越高
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(selectedFile);
});

关键说明 #

• 尺寸压缩：通过scale参数调整图片的缩放比例，缩小图片尺寸能大幅降低体积
• 质量压缩：canvas.toBlob的第三个参数是质量系数，取值0-1，值越小图片质量越低、体积越小
• 你原来的代码问题：直接把原文件的DataURL转成二进制添加到Zip，只是格式转换，没有真正压缩图片内容，所以文件大小和原文件几乎一致

内容的提问来源于stack exchange，提问作者Turtle corporation