Using CanvasRenderingContext2D.putImageData()/getImageData() results in slightly changed color values
Reported by
burd...@gmail.com,
Dec 17
|
||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
Steps to reproduce the problem:
1. Open attached file or run this code
((size) => {
const image = new ImageData(size, size);
image.data[0] = 47;
image.data[1] = 42;
image.data[2] = 32;
image.data[3] = 101;
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const context = canvas.getContext('2d');
console.log(image.data);
context.putImageData(image, 0, 0);
console.log(context.getImageData(0, 0, 1, 1).data);
})(1);
2. Check javaScript console for output
What is the expected behavior?
Pixel color data should be equal after retrieving from Canvas
What went wrong?
Source pixel data is
R 47, G 42, B 32, A 101
After writing to Canvas and retrieving it changes to
R 48, G 43, B 33, A 101
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 70.0.3538.110 Channel: n/a
OS Version: OS X 10.13.6
Flash Version:
I've tried using different blending options or disabling smoothing with "imageSmoothingEnabled = false" but this have no effect.
,
Dec 17
,
Dec 24
As per comment #0, able to reproduce the issue on reported chrome version 70.0.3538.110 also on latest chrome 73.0.3649.0 using Mac 10.14.0, Ubuntu 17.10 and Windows 10. Same behavior is seen on M60(60.0.3112.113) hence considering it as non-regression and marking it as Untriaged. Thanks.!
,
Jan 8
Yeah. This is WAI. According to the spec (https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-putimagedata): Due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values. Which is exactly what you are seeing here. |
||||
►
Sign in to add a comment |
||||
Comment 1 by burd...@gmail.com
, Dec 17It seems color information changes depending on alpha channel information. When alpha 255 used, colors aren't changing. ((size) => { const image = new ImageData(size, size); image.data[0] = 47; image.data[1] = 42; image.data[2] = 32; image.data[3] = 255; const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const context = canvas.getContext('2d'); console.log(image.data); context.putImageData(image, 0, 0); console.log(context.getImageData(0, 0, 1, 1).data); })(1); Gives Uint8ClampedArray(4) [47, 42, 32, 255] Uint8ClampedArray(4) [47, 42, 32, 255]