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
