1616169 - honor intrinsic orientation information in drawImage()

Status: RESOLVED FIXED

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

Description

[Cameron McCormack (:heycam)]

Browsers are converging on honoring EXIF orientation data for HTML images (per bug 1607667).

For images painted with canvas drawImage(), there are some differences:

• In WebKit, where there is no image-orientation property (it's effectively always from-image), the image drawn to the canvas will honor the EXIF orientation.

• In Chrome, it will also honor the EXIF orientation, unless the value of image-orientation on the canvas element is none.

Comment 1

[Cameron McCormack (:heycam)]

Taking this to ensure it is resolved before bug 1607667 makes it to beta.

Comment 2

[Anne (:annevk)]

Thanks Cameron! I think if the idea in the CSS WG is to remove image-orientation we should do as WebKit?

Comment 3

[Cameron McCormack (:heycam)]

I think the idea is to remove the property once we know that there is no need for image-orientation: none to opt out of any unintentional breakage from flipping the initial value.

I was wrong about WebKit: while in current Safari releases there is no image-orientation, they have recently landed an implementation that supports from-image and none, with from-image` being the initial value, but it hasn't made it into a STP yet.

Comment 4

[BugBot [:suhaib / :marco]]

The priority flag is not set for this bug.
:lsalzman, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 5

[Cameron McCormack (:heycam)]

Attachment: Bug 1616169 - Part 1: Correctly size OrientedImage surface.

Comment 6

[Cameron McCormack (:heycam)]

Attachment: Bug 1616169 - Part 2: Make OrientedImages appear as images with no orientation correction required.

Comment 7

[Cameron McCormack (:heycam)]

Attachment: Bug 1616169 - Part 3: Add flag for nsLayoutUtils::SurfaceFromElement to honor image orientation data.

Comment 8

[Cameron McCormack (:heycam)]

Attachment: Bug 1616169 - Mark canvas drawImage orientation tests as tentative.

Per https://github.com/web-platform-tests/wpt/issues/18549#issuecomment-599563610.

Comment 9

[Cameron McCormack (:heycam)]

Attachment: Bug 1616169 - Part 5: Make canvas drawImage always honor image orientation metadata.

Note that this does not match what the recently added WPTs require, which
is that the value of image-orientation on the canvas element is used to
determine whether to correctly orient the image. This isn't currently
supported by the HTML spec however; if that gets edited in, we can
update our behavior.

Comment 10

[Anne (:annevk)]

Can you get Apple/Google to start a discussion on that if they still want it? Seems weird, but not out-of-line with the way <canvas> works I suppose.

Is there an equivalent bug for WebGL APIs? They also appear to take images as input.

Comment 11

[Cameron McCormack (:heycam)]

I'll file a separate issue for canvas.

I don't have a separate bug for WebGL, but in the end I'm going to solve this in a more general way, in bug 1616411, that doesn't require any specific updates to canvas or other image consumers. So in this bug I'm only going to land the test renamings.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/23d1f2dbee27
Mark canvas drawImage orientation tests as tentative. r=tnikkel

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/22799 for changes under testing/web-platform/tests

Comment 14

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 15

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/23d1f2dbee27

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 17

[Andrew Swan [:aswan]]

There's still an outdated note on https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

drawImage() will ignore all EXIF metadata in images, including the Orientation. This behavior is especially troublesome on iOS devices. You should detect the Orientation yourself and use rotate() to make it right.