739690 - Respect JPEG image rotation/orientation from EXIF data when showing standalone image

Status: RESOLVED DUPLICATE of bug 298619

(Core :: Layout: Images, Video, and HTML Frames, enhancement)

Description

[Fred Wenzel [:wenzel]]

Attachment: Example image

If you take a photo with your phone and directly email it to someone who will use Firefox to look at the picture, it'll show up without looking at the EXIF data, resulting in the picture not being rotated correctly.

EXIF-based image orientation changes are common for mobile phones, for example.

I'm attaching an example picture. The head is tilted to the right (look at the file in Firefox to see how). The EXIF data says the file is rotated 90 degrees to the right. Look at the file in GIMP or Mac OSX Preview.app to see how.

Our layout engine should respect this EXIF data.

Comment 1

[Fred Wenzel [:wenzel]]

I stripped most useless EXIF data from this picture. What remains is (note the Orientation):

$ exiftool obama.jpg                                              
ExifTool Version Number         : 8.85
File Name                       : obama.jpg
Directory                       : .
File Size                       : 26 kB
File Modification Date/Time     : 2012:03:27 10:29:02-07:00
File Permissions                : rw-r--r--
File Type                       : JPEG
MIME Type                       : image/jpeg
JFIF Version                    : 1.01
Exif Byte Order                 : Big-endian (Motorola, MM)
Orientation                     : Rotate 90 CW
X Resolution                    : 399
Y Resolution                    : 399
Resolution Unit                 : inches
Y Cb Cr Positioning             : Centered
Image Width                     : 659
Image Height                    : 492
Encoding Process                : Baseline DCT, Huffman coding
Bits Per Sample                 : 8
Color Components                : 3
Y Cb Cr Sub Sampling            : YCbCr4:2:0 (2 2)
Image Size                      : 659x492

Comment 2

[Fred Wenzel [:wenzel]]

Finally, here's the relevant EXIF standard:
http://www.exif.org/Exif2-2.PDF

(page 24 of the PDF or page 18 of the document).

Comment 3

[Dave Townsend [:mossop]]

Interesting. Should we respect it for <img> tags too? What about CSS backgrounds? If not right clicking an image and viewing it can give different results which seems sort of odd to me.

Comment 4

[Fred Wenzel [:wenzel]]

(In reply to Dave Townsend (:Mossop) from comment #3)
> Interesting. Should we respect it for <img> tags too? What about CSS
> backgrounds?

Hm, I hadn't considered that. I fear, unless the code is shared, that this is blowing the scope of this bug out of proportions, but: Yeah we probably should.

Reasoning: The EXIF data didn't get there on accident, but it's indicating the way this image is meant to look when you display it.

Funnily, if you attach such a picture to Gmail for example, their thumbnail generator will respect EXIF and show it upright, but actually viewing the image will not.

Comment 5

[Dave Townsend [:mossop]]

I suspect it's easier to do it for all rather than some, but I bet it will break some number of websites.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Dup of bug 298619?

The standalone image code just creates an <img> element, by the way, so the code is in fact very much shared.

Comment 7

[Boris Zbarsky [:bzbarsky]]

That said, we could apply a transform to the standalone image specifically...

Comment 8

[Bobby Holley (:bholley)]

I'm almost sure that this will break the web. Chrome and Safari don't respect EXIF data either. So there are likely tons of images out there with unintentional EXIF data (think about a banner that was originally based on a photo).

I could imagine us wanting this for something like the B2G email app though. Maybe some sort of opt-in CSS property? Anyway, duping this to the existing bug on the topic.