Respecting EXIF orientation when displaying iPhone photos on the web

Question

I am developing an iPhone camera app that uploads an image to Amazon S3 and that image is displayed on a website. When the iPhone takes a picture, it always saves the photo in an upright orientation, while the orientation used to correctly view the photo is saved in the image's EXIF data. So if I take a photo with the iPhone and open it in FireFox without processing the EXIF data, the image could be sideways or upside down.

My problem is that I don't know how to display the photo in it's correct orientation on the website. My current solution is to rotate the photo in the iPhone app, but I'd rather not do that. Is there anyway to respect the EXIF data when displaying on the web without pre-processing the image?

Answer 1

You have several options, listed in my order of preference.

1. Rotate the image on the camera.
2. Upload the data through Amazon EC2 and use program to read the exif and do the rotation
3. Run a program on your web server that proxies s3 and does the rotation.
4. Use some fancy Javascript and DHTML.

Option 3 might not be reliable across browsers, and I'm not sure of the performance. Option 2 would add unnecessary complexity. You might not want to do it, but unless you are planing on using the net for anything but storage, option 1 is best.

Answer 2

Rotating on the camera might be the best option, but if you rotate before storage and the image is a JPEG, rotation is a lossy operation -- so the image you store will immediately lose some quality.

Luckily, it doesn't have to be that way -- if instead of reading in the JPEG, rotating the image and then re-encoding as JPEG, there are ways to apply rotation directly to the file.

JPEG is stored as a series of 8x8 cells -- they can individually be rotated and rearranged without losing quality (90 degree increments) -- then you need to update the meta-data that has the size information.

Here's some C++ code you could try to port

http://eng.neologica.it/download/downloadIJGWin32.html

For .NET, my company (Atalasoft) provides an SDK that can do this.

Another option is reading the JPEG, rotating and then storing as PNG, but the file size will be much larger.