1564729 - canvas.getImageData bug

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect, P5)

Description

[Yann Groleau]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

1 - I load an image.
2 - On the onLoad event I create a canvas to draw it.
3 - Then I use getImageData to retreive each RGBA values of each pixel of the image.

here is the code :
var img = new Image();
img.src = "img.png";
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;

var context = canvas.getContext('2d');
context.imageSmoothingEnabled       = false;
context.msImageSmoothingEnabled     = false;
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled    = false;
		
context.drawImage(img, 0, 0, img.width, img.height);

var rgbaValues = context.getImageData(0, 0, img.width, img.height).data;

}

And here is a link to illustrate the bug :
http://www.hauwell-studios.com/ffbug/

Actual results:

On any version of FF (from 38 to 67) used on MAC (from SnowLeopard to Mojave) the return results are totaly wrong.

On the example link, the first pixel of the image is supposed to be RGBA(6,158,130,255). But FF on MAC return RGBA(0,159,132,255) !

It's the same for all the pixels : wrong values returned.

Expected results:

On all other browsers, used on any type of platform, the return values by javacript client side are exactly the one I generate by c# server Side.

Comment 1

[Timothy Nikkel (:tnikkel)]

If you remove the gAMA and sRGB chunks from the png file it works as you expect.

Comment 2

[Yann Groleau]

Thanks Timothy,

Indeed, it works well when I remove the chunks gAMA and sRGB.

But if Imay, from my point of view, it should be considered as a bug because with any other browser and even with Firefox on Windows, we don't need to remove these chunks to retreive the correct RGBA values.

If we can't manage the PNG server side (fortunatly I can) this solution supposes to load the PNG with javascript as an arraybuffer and use an external library to defalte the IDAT chunks.

Being able to use the "native" canvas context getImageData function regardless the presence or not of these chunks would be much better.

Kind regards

PS : sorry form my english. My mother tong is french.

Comment 3

[Yann Groleau]

I wanted to add this comment :

this "bug" happens only with Firefox on MAC desktop OS.

The application "Firefox" available on the app store for iOS reads correctly the RGBA values with getImageData(), regardless the presence or not of the chunks gAMA and sRGB.

And Firefox on windows also reads correctly the RGBA values with getImageData().

So you should consider that as a real bug in Firefox on MAC desktop OS...

Comment 4

[Timothy Nikkel (:tnikkel)]

Presumably the gamma or color profile of the monitor on the Windows machine means we don't need to adjust the image.