I'm trying to read an image's imageData onto a canvas, and then do palette-based color replacement. However, Firefox and Chrome are generating different imageData for the same image.
Here's a MCVE (run the following code in the browser's dev console, after navigating to the image in question to avoid Firefox throwing a security error):
let img = new Image();
img.src = "https://artmonitors.com/static/media/personal/FEArena/701.png"
// [wait for image to load]
let canvas = document.createElement('canvas');
canvas.width = img.width; // 165 pixels
canvas.height = img.height; // 129 pixels
let ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
let imgData = ctx.getImageData(0, 0, 165, 129);
console.log(imgData.data);
In Chrome, the first two pixels of image data are as such:
Uint8ClampedArray(85140)?[128, 160, 128, 255, 128, 160, 128, 255, ...]
In Firefox, the output is different:
Uint8ClampedArray(85140) [ 129, 159, 129, 255, 129, 159, 129, 255, ... ]
I tried in Safari as well, and it outputs the same thing as Chrome:
Uint8ClampedArray [128, 160, 128, 255, 128, 160, 128, 255, ...] (85140)
If you download the image and load it into an image editor, then you can verify that the color of the first two pixels is, in fact, #80a080, or rather, rgba(128, 160, 128, 255).
Why does Firefox have the wrong color for the image, and how can I make its behavior the same as the other browsers?
Edit: version information for various browsers:
- Firefox:
84.0.2 (64-bit) (OS X)
- Chrome:
Version 87.0.4280.88 (Official Build) (x86_64) (OS X)
- Safari:
Version 14.0 (15610.1.28.1.9, 15610) (OS X)
question from:
https://stackoverflow.com/questions/65837354/firefox-has-different-imagedata-than-other-browsers-for-the-same-image 
