The questions I read on stackoverflow have not helped me solve my problem.

This is all client side code no nodejs.

I have code that uses Fetch api to return a png in response.body. I can successfully write this file to disk using the File System Access Api. Without processing the png through pngjs the image is saved correctly.

Although pngjs says it accepts a readable stream and response.body is supposed to be a readable stream pngjs throws an error. My guess is that the readable stream on the web is different from the nodejs format. However, I can return the data from the fetch as an ArrayBuffer and pngjs will accept this without a problem.

My issue is the returned png from the pngjs parse method is corrupt even if I do not actually do anything to the image in the parsed method.

Here is some code.

//Fecth png into ArrayBuffer

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

//Parse arrayBuffer with pngjs

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())
      })
    })
  }
}
}

//Write file to disk

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

I am not doing anything to the data during the parse method just for testing.

From the code above if I just return the arrayBuffer res(arrayBuffer) the file is correct. However is I pass it to pngjs parse method even thought I am not modifying the file it turns out corrupted.

When I do not parse the file it returns an ArrayBuffer of the correct size and writes out a file with the size of 595kb with an arrayBuffer size of 608325

When I parse the file even though I am not modifying it. The resulting file size is 1024kb and the ArrayBuffer size is 1048576.

The ArrayBuffer returned from both processes is of type uint8Array.

Expected Result: Is that since I am not changing the file in the pngjs parse method the ArrayBuffer returned should be the same size and the file should not be corrupted.

UPDATE: I tried a different png encoder/decoder library with the same results.

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.