New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 709957 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Apr 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Canvas toBlob / toDataURL giving wrong results with 'image/jpeg'

Reported by cyril.au...@gmail.com, Apr 10 2017

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Steps to reproduce the problem:
1. https://jsfiddle.net/crl/pfcxs6nn/1/ or https://jsfiddle.net/crl/pfcxs6nn/ (using toBlob)
2. first image is the original, second the jpg, third the png
3. jpg is not correct

What is the expected behavior?
The 3 images should look the same

What went wrong?
jpg blob is not correctly generated

Did this work before? N/A 

Chrome version: 57.0.2987.133  Channel: stable
OS Version: 
Flash Version: 

Firefox has the same issue
 
Components: -Blink Blink>Canvas
Labels: M-57 OS-Mac OS-Windows
I see similar behavior on Windows 7,10, Mac as well with Current and previous stable i.e, 57.0.2987.133 and 56.0.2924.87 respectively, Also with Chrome Beta(58.0.3029.54), dev(59.0.3063.4) and canary(59.0.3067.0).

Can someone from paint team confirm if this is according to the spec. 

Note : As noted in bug report I see similar behavior on Firefox and Safari as well. 
Cc: junov@chromium.org

Comment 4 by junov@chromium.org, Apr 10 2017

Status: WontFix (was: Unconfirmed)
The browser is working as intended.

The JPEG file format does not have an alpha channel, so it has no way of storing the notion of a transparent pixel.  For file formats that do not support transparency, the correct behavior, as defined in the spec, is to encode the opaque image that is the result of compositing the canvas contents over solid black background.

If you just make the canvas opaque by filling it with an opaque color (like this: https://jsfiddle.net/pfcxs6nn/2/) before drawing you semi-transparent image, then there are no side-effects from using jpeg because there are no transparencies in the canvas contents.
Ah ok, thanks a lot, I understand now

Sign in to add a comment