Uint8Array 未显示 PNG 文件的正确值

Question

I am trying to decode a PNG file coming as an Uint8Array from the backend using javascript in the browser. Slicing the Uint8Array from 15~28 and console.logging the values prints this : [82, 0, 0, 1, 0, 0, 0, 1, 0, 8, 6, 0, 0]. If I sum the bytes from 0~4 in this array I obtain 83 which should be the value for the width, but the width is 256px.

With the same file I tried decoding it on this website https://www.nayuki.io/page/png-file-chunk-inspector it show [00 00 00 0d 49 48 44 52 00 00 01 00 00] these values for 15~28. But it correctly says that the png has a width of 256px. Which I also don't understand how, adding 00+00+00+0d results a value of 13 in decimal.

So far I don't really understand what happens. The PNG standard says that http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html the IHDR width is a 4-byte integer from 15~19 but in practice it is not working.

Answer 1

Looking through the image decoding website you linked, it seems that the first 4 hex values represent how many bytes are in the rest of the string: this is why the first 4 work out to 13, because there should be 13 bytes in the IHDR. Additionally, the next 4 [49, 48, 44, 52] stay the same between your image and all of the 'good' examples on the website. The real place where the width and height are stored are the two bytes after that, which are both 00 00 01 00. This value 00000100 works out to be 256, as per this converter