Getting photo orientation data with JavaScript

A feature we had to make recently was allowing someone to crop an image in the browser before uploading it. It turns out that doing image manipulation in the browser opens you up to all sorts of fun and games. Not least needing to handle how the image should be positioned.

If you’ve ever seen a photo appear the wrong way in an app or a web page, it is likely because the developer hasn’t thought about how orientation information is stored in an image. I certainly hadn’t had to think about it before!

Photos taken by a digital camera, including smart phones, contain a load of meta information. This is stored as what is called Exif data, Exif stands for Exchangeable image file format.

Examples of the data that could be stored include, the model of camera, the exposure time, the dimensions, and, crucial to our purposes, the orientation.

When photos are taken the camera could be in portrait mode, landscape, the photographer could be upside down, who knows! Well, the image does! It stores this information in the Exif data.

There are 8 potential values for the orientation, I’m not going to get into each one because there is an excellent guide on image orientation. What I am going to talk about is how you get access to this information.

Exif JS

There is an excellent JavaScript library called exif-js which can let you easily give it an image and it will extract the information for you.

If the image is already on the page, you can use the library like this;

var my_image = document.getElementById("my_image");
EXIF.getData(my_image, function() {
  console.log(EXIF.getTag(this, "Orientation") || 1);
});

This code gets an image by its ID, in our example my_image. It takes that image and passes it into the EXIF.getData function, which takes two arguements, the first is the image, and the second is the function to call once it has got the data.

Inside the function we run once the Exif data has been found by exif-JS we’re logging out either the result of EXIF.getTag(this, "Orientation") or if that isn’t set, 1.

EXIF.getTag takes two arguments, the first is the EXIF data, this. The second is the value to look up, in our case “Orientation”.

Not all images have this data available to them, so we fall back to a value of 1 which is the default orientation.

Access images on the fly

If you need to get this data to an image that doesn’t yet exist, you can add an event listener to the image’s load event.

var image = document.createElement("img");

image.addEventListener("load", function(){
  EXIF.getData(image, function() {
	  console.log(EXIF.getTag(this, "Orientation") || 1);
  });
});

image.src = 'https://cutecatpictures.com/cutecat.jpg';

In this code, our EXIF.getData won’t run until the image is loaded, which happens on the last line when we set the src to be a value.