Re: [csswg-drafts] [css-images] image-orientation and canvas drawImage (#4666)

Hi, I'm the author of a [JavaScript Image Loading/Manipulation library](https://github.com/blueimp/JavaScript-Load-Image/) (see also the [previously referenced issue](https://github.com/blueimp/JavaScript-Load-Image/issues/97)) and I noticed that there's another variable in `image-orientation` browser behavior that's not detailed out in the spec:

If the image and canvas elements are constructed outside of the DOM and the canvas only added to the DOM after the `drawImage()` call, results in browsers will differ even though `image-orientation` support might be the same.

For browser-based image manipulation libraries, it's important to be able to change the `image-orientation` behavior for out-of-DOM constructed elements or at least to be able to consistently detect their behavior based on browser support.

One use case for this is to be able to auto-rotate (based on EXIF data) and save the resulting image without keeping the meta data.
Another use case is to provide users the ability to provide an arbitrary rotation parameter.
In both cases, if the image has already been rotated by the browser, the library needs to detect this so it doesn't apply an incorrect rotation.

Currently, the situation looks like the following:

| Browser | Version | initial value | default behavior | Out-of-DOM result |
| - | - | - | - | - |
Chrome | 81.0 | `from-image` | `from-image` | `from-image`
Safari | 13.1 | `from-image` | `from-image` | `from-image`
Firefox | 75.0 | `none` | `none` | `none`
Firefox | 76.0b2 | `from-image` | `none` | `none`

To illustrate this better, I took the liberty to extend your test example @heycam with the out-of-DOM behaviors (hot-linking your example image) - hope that is acceptable:
https://image-orientation-test.glitch.me/

At the moment, the only way I see to properly detect if an out-of-DOM created canvas element has been rotated by the browser is to use a (minimal) test image, which is less than ideal.

I hope this provides some context from the JS library author view. ☺️ 

-- 
GitHub Notification of comment by blueimp
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4666#issuecomment-610962845 using your GitHub account

Received on Wednesday, 8 April 2020 13:34:18 UTC