Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

JPG EXIF Orientation flag test #609

Merged
merged 1 commit into from Jul 19, 2012

Conversation

Projects
None yet
3 participants
Contributor

psayre-sc commented Jun 6, 2012

iOS looks at the EXIF Orientation flag in jpgs and rotates the image
accordingly. Looks like most desktop browsers just ignore this data.

@psayre-sc psayre-sc Added EXIF Orientation test
iOS looks at the EXIF Orientation flag in jpgs and rotates the image
accordingly. Looks like most desktop browsers just ignore this data.
d17576a
Contributor

psayre-sc commented Jun 6, 2012

Here's a test case for the need. Try opening this link up in iOS, then a desktop browser. The top image is normal, the second one has a class applied, which CSS rotates the image if need be.

http://jsfiddle.net/GdxMd/embedded/result/

Owner

paulirish commented Jun 6, 2012

this is kind of fascinating. had no idea this was a thing.

is there a URL with more of an explanation? if so can we include it in the js?

test lgtm

Owner

ryanseddon commented Jun 6, 2012

Oh wow that is very cool

Contributor

psayre-sc commented Jun 6, 2012

I haven't seen any testing on how to handle the fail case (everyone not iOS). I'm planning on digging into it more with some tests. I'm hoping iOS has a property on the img element, or some meta tag that says ignore the exif data. But you know how plans go...

In the meantime, here's the test for it.

~ Paul

On Jun 5, 2012, at 6:29 PM, Paul Irish reply@reply.github.com wrote:

this is kind of fascinating. had no idea this was a thing.

is there a URL with more of an explanation? if so can we include it in the js?

test lgtm


Reply to this email directly or view it on GitHub:
#609 (comment)

Owner

paulirish commented Jun 6, 2012

is there a post or documentation on the bit or iOS's beavior? I just want something that explains what this test is looking for as part of the .js file

Owner

paulirish commented Jun 20, 2012

I love this test but just want something to point to...

quick research

Owner

paulirish commented Jul 19, 2012

merging. will add docs myself

@paulirish paulirish added a commit that referenced this pull request Jul 19, 2012

@paulirish paulirish Merge pull request #609 from psayre-sc/master
JPG EXIF Orientation flag test
dfd2e1d

@paulirish paulirish merged commit dfd2e1d into Modernizr:master Jul 19, 2012

@paulirish paulirish added a commit that referenced this pull request Jul 19, 2012

@paulirish paulirish docs on exif orientation. ref #609 cbdd33e
Contributor

psayre-sc commented Jul 19, 2012

I haven't found any good resources on this. What's worse, I haven't found a way to detect what way the image is rotated when the flag is set. The only good solution involves server side processing, which doesn't help us here.

On Jul 19, 2012, at 6:32 AM, Paul Irish reply@reply.github.com wrote:

merging. will add docs myself


Reply to this email directly or view it on GitHub:
#609 (comment)

Owner

paulirish commented Jul 19, 2012

Hmm.. well i added in docs myself.

why cant you check that a red pixel is red to determine how it was oriented?

Owner

paulirish commented Jul 19, 2012

(assuming all supporting browsers also support canvas, which is fair, IMO)

Contributor

psayre-sc commented Jul 19, 2012

That's kinda how the feature detect works. There is a 2x1 image with the rotation flag set. If the browser reports the image as 1x2, then it's reading the exif data. The hard part is once you know the browser reads exif, which way is the image rotating, if at all. Tossing the image into canvas will rotate it the same way the browser renders it, so you it doesn't give you a different result.

Luckily, this is only one browser right now, so there's still time to get a good solution.

Owner

paulirish commented Jul 19, 2012

i see.

this test shipped today in the 2.6 release btw

http://modernizr.com/news/modernizr-260/

On Thu, Jul 19, 2012 at 5:28 PM, Paul Sayre <
reply@reply.github.com

wrote:

That's kinda how the feature detect works. There is a 2x1 image with the
rotation flag set. If the browser reports the image as 1x2, then it's
reading the exif data. The hard part is once you know the browser reads
exif, which way is the image rotating, if at all. Tossing the image into
canvas will rotate it the same way the browser renders it, so you it
doesn't give you a different result.

Luckily, this is only one browser right now, so there's still time to get
a good solution.


Reply to this email directly or view it on GitHub:
#609 (comment)

Contributor

psayre-sc commented Jul 30, 2012

I just noticed Webkit is getting support for the image-orientation CSS property. This may be a possible solution. Setting this property is supposed to tell the rendering engine to ignore the meta data. That said, I doubt it will be in iOS 6 when that comes out, so we are out of luck before that. I still haven't found a good solution for fixing iOS's behavior.

Owner

paulirish commented Oct 30, 2012

Hmm.... Chrome Canary has support for this but is not passing the feature detect :/

@psayre-sc can you take a look?

Demo image: https://raw.github.com/recurser/exif-orientation-examples/master/Landscape_5.jpg

Owner

paulirish commented Oct 30, 2012

I tried opening the data uri directly and also saving it to file and opening that but Canary opens it only as 1x2 and not 2x1.

I'm pinging our engineer

Owner

paulirish commented Oct 30, 2012

Chrome only looks at exif data for image documents (ie when you're looking at a jpeg file). In html documents, exif information is still ignored because folks are concerned that changing this would break the web (safari/ios looks at exif data for documents, and it does break some sites: http://recursive-design.com/blog/2012/07/28/exif-orientation-handling-is-a-ghetto/). As far as I know, we're not planning to turn it on for web pages, but the css4 image-orientation attribute might get an "from-exif" value or something eventually.

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this pull request Feb 22, 2015

@paulirish paulirish Merge pull request #609 from psayre-sc/master
JPG EXIF Orientation flag test
ff78bc2

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this pull request Feb 22, 2015

@paulirish paulirish docs on exif orientation. ref #609 1a93681
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment