Railsfactory Blog
iphone-photo-upside-down-issue

How to Fix Wrongly Oriented iPhone Photos on a Desktop

Apple thinks different. This idea of thinking different doesn’t just stop at hardware design and user interface, even the internal working is designed differently. This sometimes causes inconsistency and inconvenience. One such thing happened in the project which I was working on.

It is a web application built using ReactJS and Ruby On Rails. So, the issue was this: when a user shot a picture by holding the iPhone vertically the picture got saved on the iPhone. When it was viewed on the iPhone or Mac, it showed properly in portrait view, but when it was uploaded into our web application, it was turning into landscape view with a wrong orientation.

intended-iphone-photo
Intended
actual-iphone-photo
Actual
  1. EXIF
  2. How typically devices take picture
  3. How iPhone takes the picture

EXIF:

Wikipedia to help!

Exchangeable image file format (officially EXIF, according to JEIDA/JEITA/CIPA specifications) is a standard that specifies the formats for images, sound, and ancillary tags used by digital cameras (including smartphones), scanners and other systems handling image and sound files recorded by digital cameras.

So, EXIF is a format in which metadata about pictures can be found. This metadata may include information regarding the device used for capturing the photo (for example iPhone 5S, Samsung S4, etc), camera specifications, GPS coordinates, orientation, etc.

How devices typically take pictures?

Typically if a device takes a picture,, it uses its sensors to rotate the image to the right orientation. Because of this wherever we view the photo we have the correct orientation for the image.

How an iPhone takes pictures?

When an iPhone takes an image it doesn’t rotate the image, rather it keeps the image as it was taken and inserts the information with which the image can be correctly viewed. The result is something like 90 degree clockwise. It expects the software used for viewing to rotate the image taken to correct orientation.

Why does it do so?

The exact reason isn’t known but maybe this is done to save battery in iPhone, or maybe to prevent any delays in saving the image.

How did it affect us?

Well, we were using the library https://github.com/react-dropzone/react-dropzone for our image upload. This doesn’t have the feature to correct the images based on EXIF values. There was even a closed issue on that. The contributors closed the issue on the note that they want the library to be as light as possible.

The Solution

The library at https://github.com/blueimp/JavaScript-Load-Image has many features to load and transform images in JavaScript. However, rotating the image takes a number of steps:

  1. Load the image using react-drop zone library
  2. Write the image to canvas
  3. Read the EXIF data using JavaScript-Load-Image
  4. Use the EXIF data to rotate the image in the canvas
  5. Export the rotate canvas to blob

So what?

We felt there should be an easier way of doing it and created a wrapper on top of JavaScript-Load-Image specifically for this purpose, packaged it and pushed it to https://www.npmjs.com/package/fix-image-rotation.

By: Manoj Mohan

manoj-mohan-tarka-labs

Manoj Mohan is an open source enthusiast who believes that programming is an art in itself.

Add comment

Your Header Sidebar area is currently empty. Hurry up and add some widgets.