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/

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

Oh wow that is very cool

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)

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

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

quick research

• moz bug: https://bugzilla.mozilla.org/show_bug.cgi?id=298619 (unimplemented in ff)
• crbug : http://code.google.com/p/chromium/issues/detail?id=56845 looks incomplete
• webkit : https://bugs.webkit.org/show_bug.cgi?id=19688 upstream but its up all ports to turn on individually
• http://www.impulseadventure.com/photo/exif-orientation.html descibes the feature and digicams
• http://www.exif.org/Exif2-2.PDF spec. not useful.

merging. will add docs myself

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)

Hmm.. well i added in docs myself.

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

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

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.

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)

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.

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

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

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.