使用client-zip打包base64格式PNG时压缩包内图片损坏如何解决

你直接传入了base64格式的Data URI字符串给client-zip，client-zip会将字符串按文本编码写入压缩包，而非写入PNG的二进制内容，因此解压后的图片会提示损坏。client-zip的input字段需要接收二进制类型数据（Uint8Array、ArrayBuffer、Blob均可），需要先对Data URI做格式转换。

1. 新增Data URI转二进制数组的工具方法：

function dataURItoUint8Array(dataURI) {
  // 切掉Data URI前缀，提取纯base64内容
  const base64Str = dataURI.split(',')[1]
  // 解码base64为二进制字符串
  const binaryStr = atob(base64Str)
  const uint8Array = new Uint8Array(binaryStr.length)
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Array[i] = binaryStr.charCodeAt(i)
  }
  return uint8Array
}

2. 修改addImageData方法，传入转换后的二进制数据：

function addImageData(index){
    let fileName = "file_".concat(timePoints[index].concat(".png"));
    let content = o.png();
    // 转换为client-zip支持的二进制格式
    const pngBinary = dataURItoUint8Array(content)
    snapshotArray.push({ 
        name: fileName, 
        lastModified: new Date(), 
        input: pngBinary 
    });
}

3. downloadMyZip函数无需修改，直接沿用原有逻辑即可。

如果你的o.png()方法支持直接返回Blob或ArrayBuffer类型的PNG数据，可以直接用该返回值作为input，不需要额外做base64转二进制的操作，运行效率更高。

内容的提问来源于stack exchange，提问作者Ozan.kah