如何将JSZip读取的Uint8Array压缩内容转为可用于canvas加水印上传的图片

你在取文件内容时直接读取了JSZip内部存储的压缩态字节：zipValues[i]._data.compressedContent 是ZIP算法压缩后的私有二进制块，根本不是解压完成的原始图片内容。用这个经过压缩编码的乱码流生成Blob，哪怕设置了正确的image MIME type，浏览器拿到的也不是标准图片二进制，自然会弹出“图片无法显示，因为它包含错误”的加载失败提示。
同时你直接访问了JSZip的内部私有属性（以下划线开头的_data字段），这类字段属于库的内部实现细节，没有对外的API稳定性承诺，很容易因为版本更新出现字段结构变动，本身就不应该在业务代码里直接调用。

• 遍历ZIP内的所有文件条目时，先过滤掉目录类条目（ZIP压缩包内的文件夹路径是无实际文件内容的特殊标记，不需要做处理）
• 弃用读取内部私有属性的写法，直接用JSZip官方提供的异步API，调用文件条目的async方法获取已经完成解压的原始文件Blob
• 用合法的原始Blob生成对象URL，加载为Image对象后，直接接入你原本的canvas绘制、加水印、格式转换、存入待上传数组的逻辑即可

async chapterUpload(e) {
  const selectedZipFile = e.target.files[0];
  const zip = new JSZip();
  try {
    // 加载并解压整个ZIP包
    const loadedZip = await zip.loadAsync(selectedZipFile);
    const zipEntries = Object.values(loadedZip.files);
    for (const entry of zipEntries) {
      // 跳过压缩包内的目录条目
      if (entry.dir) continue;
      // （可选）仅处理指定图片格式，过滤ZIP内混存的非图片文件
      const fileExt = entry.name.split('.').pop()?.toLowerCase();
      if (!['jpg', 'jpeg', 'png', 'webp'].includes(fileExt)) continue;
      // 直接获取解压后的原始文件Blob，禁止读取内部compressedContent
      const imgBlob = await entry.async('blob');
      const imgObjectUrl = URL.createObjectURL(imgBlob);
      // 加载图片到DOM
      const img = new Image();
      img.src = imgObjectUrl;
      await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
      });
      // 此处接入原有canvas绘制、加水印、导出处理后图片存入待上传数组的逻辑
      // 图片绘制完成后回收对象URL，释放内存
      URL.revokeObjectURL(imgObjectUrl);
    }
  } catch (err) {
    alert("请上传合法的ZIP格式压缩包");
  }
}

• 所有带_前缀的JSZip内部字段都不要直接访问，官方对外稳定的内容获取入口就是entry.async()，支持返回Blob、Uint8Array、ArrayBuffer等多种格式的解压后内容，不需要自己处理ZIP解压流程。
• ZIP解压是IO密集的异步过程，不要在同步循环里硬等内容返回，改成async/await写法可以避免大文件解压时阻塞主线程。
• 批量处理大量图片时，每生成一个对象URL，在图片成功绘制到canvas之后及时调用URL.revokeObjectURL释放缓存，避免大量图片内存堆积导致浏览器崩溃。

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