javascript - 你如何使用 npm pngjs web 版本解析方法来获取 png 文件并将文件写入磁盘

Question

我在 stackoverflow 上阅读的问题并没有帮助我解决我的问题。

这是所有客户端代码，没有nodejs。

我有使用 Fetch api 在 response.body 中返回 png 的代码。我可以使用 File System Access Api 成功将此文件写入磁盘。在不通过 pngjs 处理 png 的情况下，图像被正确保存。

尽管 pngjs 说它接受一个可读流并且 response.body 应该是一个可读流，但 pngjs 会抛出一个错误。我的猜测是网络上的可读流与nodejs格式不同。但是，我可以将 fetch 中的数据作为 ArrayBuffer 返回，而 pngjs 将毫无问题地接受这一点。

我的问题是从 pngjs parse 方法返回的 png 已损坏，即使我实际上没有对 parsed 方法中的图像做任何事情。

这是一些代码。

//Fecth png 到 ArrayBuffer

  const response = await fetch(url);
  let arrayBuffer = await response.arrayBuffer()

//用pngjs解析arrayBuffer

processImage(arrayBuffer)

  async function processImage(arrayBuffer) {
    let dst = new PNG({})
    return new Promise((res, rej) => {
   //  res(arrayBuffer)
      dst.parse(arrayBuffer, function (error, data) {
       res(data.pack())
      })
    })
  }
}
}

//将文件写入磁盘

 writable.write({type: "write", data: data.data})
 await writable.close();

在解析方法期间，我没有对数据做任何事情，只是为了测试。

从上面的代码中，如果我只返回 arrayBufferres(arrayBuffer)文件是正确的。但是，我是否将它传递给 pngjs 解析方法，即使我没有修改它原来已损坏的文件。

当我不解析文件时，它返回正确大小的 ArrayBuffer 并写出大小为 595kb 的文件，arrayBuffer 大小为 608325

当我解析文件时，即使我没有修改它。生成的文件大小为 1024kb，ArrayBuffer 大小为 1048576。

从两个进程返回的 ArrayBuffer 都是 uint8Array 类型。

预期结果：是不是因为我没有在 pngjs 解析方法中更改文件，所以返回的 ArrayBuffer 应该是相同的大小并且文件不应该被损坏。

更新： 我尝试了不同的 png 编码器/解码器库，结果相同。

import UPNG from '@pdf-lib/upng';

const response = await fetch(url);
  let arrayBuffer = await response.arrayBuffer()
  let img = UPNG.decode(arrayBuffer);        // put ArrayBuffer of the PNG file into UPNG.decode
  let rgba = UPNG.toRGBA8(img)[0];     // UPNG.toRGBA8 returns array of frames, size: width * height * 4 bytes.

标签： javascriptfile-system-access-apipngjs