0

I made a script that gets pixel data from a PNG image using ctx.drawImage(img, 0, 0) with ctx.getImageData(0, 0, imgWidth, imgHeight).data in order to extract data from PICO-8 cartridges. The image is 160x205, and a few pixels have incorrect RGBA values. I've determined via rendering the canvas to document.body and saving as an image that these pixels are actually drawn to the canvas incorrectly.

You can view a demo of the script here: http://clowerweb.com/picoder-test/, in which I have highlighted the errors. The original/expected data is on the right, and the decoded data is on the left. At the bottom of the page, I have the image as it's rendered to the canvas (left) and the original image file (right). You won't be able to tell the difference by eyeballing the two, but there are subtle differences in the RGBA values of about 6 pixels (as highlighted in the demo).

Note: Only works in Chrome, Edge, and Webkit-based browsers. IE11 and Firefox decode the data incorrectly (likely due to not using a UInt8 array buffer for getImageData; probably 16-32 bit buffers - that's my theory anyway), but that's not a concern for now. The primary concern is the fact that some pixels are being drawn to the canvas incorrectly.

If there's no way to fix the canvas bug, is there another way to extract the RBGA data from the image as UInt8 values?

I've also submitted a bug report to Chromium regarding this issue. The report contains the original image and the one output via canvas - as you can see, they are even different filesizes: https://bugs.chromium.org/p/chromium/issues/detail?id=650110

Chris Clower
  • 5,036
  • 2
  • 18
  • 29
  • Hi Chris. Yes, this difference is caused because browsers are allowed to do gamma correction of png images drawn to the canvas. They are also allowed to alpha-premultiply the color values. You can use the `pngToy` cited in the duplicate answer to get to the original color values (unmodified by the browser). :-) – markE Sep 25 '16 at 22:52
  • Thanks Mark. I've been scouring the internet and SO for days and never saw this question/answer - good find! I'll give pngtoy a shot. – Chris Clower Sep 25 '16 at 23:12
  • Hah, I'm just not having any luck with this project at all. I ended up finding a breaking bug in pngtoy :( Submitted a bug report here: https://github.com/epistemex/pngtoy/issues/6 – Chris Clower Sep 25 '16 at 23:29

0 Answers0