0
406
Viewswhy a slight difference between the composition of an image (png format) after displaying it using drawImage?
In the code below, the "img" file is an image created with Gimp.
It contains a color pixel :
rgba=176 99 234 167.
When I display it in a context and then retrieve its composition
with getImageData, there is a small difference in the RGBA values...why?
GetImageData => 177,99,235,167
The Browser is Firefox Version 101
var canvas = document.createElement('canvas');
canvas.height = 1;
canvas.width = 1;
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVUSuIOGSoThZEizhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIj14Lgf7+497t4BQq3EVLNjElA1y0hEI2I6syr6XtGFfgxhAGGJmXosuZhC2/F1Dw9f70I8q/25P0evkjUZ4BGJ55huWMQbxDObls55nzjACpJCfE48YdAFiR+5Lrv8xjnvsMAzA0YqMU8cIBbzLSy3MCsYKnGYOKioGuULaZcVzluc1VKFNe7JX+jPaitJrtMcRRRLiCEOETIqKKIECyFaNVJMJGg/0sY/4vjj5JLJVQQjxwLKUCE5fvA/+N2tmZuecpP8EaDzxbY/xgDfLlCv2vb3sW3XTwDvM3ClNf3lGjD7SXq1qQWPgL5t4OK6qcl7wOUOMPykS4bkSF6aQi4HvJ/RN2WAwVugZ83trbGP0wcgRV0t3wAHh8B4nrLX27y7u7W3f880+vsBq/ZyvpKWOQAAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQfmBhIJOxEgSszOAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAABBJREFUCB0BBQD6/wCwY+qnBmkCpSTSg9wAAAAASUVORK5CYII=";
// rgba = 176 99 234 167
img.onload = function() {
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, 1, 1);
var imgData = context.getImageData(0, 0, 1, 1);
console.log(imgData);
console.log("this is not 176 99 234 167");
}updated June 20 : My output with Firefox :
updated June 19 : maybe the explanation of the problem is in this link.
https://html.spec.whatwg.org/multipage/canvas.html
NOTE Due to the lossy nature of converting between color spaces and converting to and from premultiplied alpha color values, pixels that have just been set using putImageData(), and are not completely opaque, might be returned to an equivalent getImageData() as different values.
1 answers
Answer question0
It seems in practice you cannot assume that the colour you read back has the same RGB values as the original PNG. Some browsers seem to keep it (Chrome) while some don't necessarily do so (Firefox).
It seems to be due to colour space conversions (sRGB). See e.g. this discussion: https://bugzilla.mozilla.org/show_bug.cgi?id=867594
On Firefox, I get (164, 102, 225, 167), which is different both to the original values and to your output, so it is indeed device dependent.