Managing image rotation during a web upload thanks to EXIF data

It's so common to have a profile customization feature in a web application that we often don't even think about its purpose anymore.

But if you're one of those who decided to add a profile, chances are you also opted to add a profile picture! Except, surprise: half of your first users start uploading a photo sideways!

The explanation

When you take a photo with a smartphone (and some other devices), regardless of the device's orientation, the image storage file will always be in the same direction.

So how does the smartphone manage to display it in the right direction in the gallery?

Every new photo comes with a certain number of metadata, called "EXIF" data for "EXchangeable Image Format".

EXIF data contains a great deal of information such as:

• The device brand
• The resolution
• The flash status
• The geolocation
• And... the orientation!

As you've probably guessed, the smartphone displays the image according to the rotation recorded in the EXIF metadata, so that's exactly what we're going to do too!

The solution

To retrieve this data, we can for example use the Javascript library https://github.com/exif-js/exif-js, which will give us access to all the metadata for an input image (image element, File/Blob).

Orientation is represented by an integer between 1 and 8 indicating the rotation value (clockwise) and a possible horizontal flip. Here's the exact mapping:

• 1 => No rotation (0°)
• 2 => No rotation (0°) + Horizontal flip
• 3 => 180° rotation
• 4 => 180° rotation + Horizontal flip
• 5 => 270° rotation + Horizontal flip
• 6 => 270° rotation
• 7 => 90° rotation + Horizontal flip
• 8 => 90° rotation

Yes, I know, the ordering of these values isn't very logical, but I'm not the one who decided that!

Once you've retrieved the value using exif-js, all that's left to do is rotate the photo using a canvas, or an image processing library on the back-end.

Here's a code example for handling rotation (https://codepen.io/nicolasbrondin/pen/MWKjgOp) as well as a set of test images containing different orientation values (https://github.com/recurser/exif-orientation-examples)!