Search code examples
javascriptpng

PNG decoder returns extra bytes of pixel data

I'm trying to decode this file using UPNG.js, and getting the following output:

{ tabs: { pHYs: [ 2835, 2835, 1 ] },
  frames: [],
  width: 10,
  height: 1,
  depth: 16,
  ctype: 0,
  data:
   Uint8Array [
     255,255,
     255,255,
     255,255,
     255,255,
     255,255,
     253,23,
     252,204,
     252,130,
     252,56,
     255,255,
     255 
  ] }

The first 20 entries of the data array make sense, since each pixel is represented by 2 bytes. However, we get one extra byte. I've tested the first twenty bytes against gimp, so I know I'm getting the right pixel values. In larger images, we get one extra byte per row of pixels. I can go through the decoded pixel data and remove each last byte before I do any further processing, but I'm uncomfortable with removing possibly useful information I may need for encoding the resulting image.

I tried using other image processing libraries, but I can't find any alternative that both works in the browser, and doesn't convert the image to 8 bit RGBA behind the scenes.

Also, I know that the endianness of the TypedArrays is most likely little endian, while the endianness of the reference image is most likely big endian. I'm currently manually flipping the bytes in the Uint8Array before converting it to Uint16Array. Is there a better way?

Solution

  • Found the answer in the library's issues page, here.