Issue with canvas drawImage corrupting grayscale neutral color values
Reported by
reddu...@gmail.com,
Mar 3 2016
|
||||||
Issue descriptionChrome Versions : all versions When drawing a grayscale image using canvas drawImage method, chrome canvas implementation is misinterpreting grayscale color values and producing strange color variations between channels, particularly in dark tones, within a range of [+-] 5.0/255.0. I have created a test case using jsfiddle to make this issue more visible. I am simply drawing a grayscale gradient onto a canvas, and then brightening resulting imageData using an ultra-simple algorithm. We can clearly see that canvas is generating strange purple-ish colors instead of preserving neutral red, green, blue values. After a bit of investigation it seems to be related with canvas dimensions, as the issue is not showing when canvas has the exact same dimensions than image. https://jsfiddle.net/c6mz19g1/8/
,
Mar 4 2016
EDIT: Issue shows on windows 10 and windows 7 64 bits with Chrome 49.0.2623.75, I have witnessed this bug for a long time on all previous chrome versions. The issue does not show in Firefox, it is a Chrome only issue.
,
Mar 4 2016
,
Mar 4 2016
I have created another version of the test that takes get/putImageData out of the equation by amplifying the image using additive blending: https://jsfiddle.net/c6mz19g1/11/ I also add console loggin to dump the values. I am seeing a bias of -2 on the blue channel The fact that this requires a canvas larger than 256x256 indicates that the issue is tied to GPU-acceleration. Then I did another experiment where I replaced the data URL to use a png instead of a jpeg: https://jsfiddle.net/c6mz19g1/12/ That fixed the problem. So the issue is specifically when a jpeg image is drawn through the GPU-accelerated code path. I think this strongly suggests an accuracy problem in the GPU accelerated implementation of the YUV->RGB conversion.
,
Mar 4 2016
,
Sep 21 2016
,
Sep 21 2016
Trying to reproduce the problem using the provided scripts: 1- https://jsfiddle.net/c6mz19g1/8/ 2- https://jsfiddle.net/c6mz19g1/11/ 3- https://jsfiddle.net/c6mz19g1/12/ Chrome 53.0.2785.116 (64-bit): 1 fails, 2 fails, 3 works fine Firefox 48.0 Linux and 49.0 Win: 1 fails, 2 fails, 3 works fine Safari 9.1.3: 1 fails, 2 fails, 3 works fine IE 11.589.10586.0: 1 fails, 2 fails, 3 works fine Edge 25.10586.0: 1 fails, 2 fails, 3 works fine This shows that this issue might be a false alarm. Right click on the original image on https://jsfiddle.net/c6mz19g1/8/ and save on disk. Open using gimp and zoom out. You can see that the purple-ish lines in fact exist in the image itself. I created a new gradient jpeg and put the image into the same script: https://jsfiddle.net/zakerinasab/c6mz19g1/13/ Everything works fine now on all the browsers including Chrome. I mark this issue as WontFix. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by reddu...@gmail.com
, Mar 4 2016