javascript - How to extract image orientation information from image loaded in Canvas

Question

I am creating a web app in which it allows image upload directly in the canvas. Sometimes, when images are uploaded from iPad or other such devices, they are oriented differently.

I am trying to find a way to extract their orientation info and accordingly rotate the image in canvas.

Things I've tried:

• I've tried extracting EXIF information :

  dataUrl = canvas.toDataURL('image/jpeg');
  var bin = atob(dataUrl.split(',')[1]);
  var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
  alert(exif.Orientation);
  

But it returns undefined.

Ref. this answer.

• I found this fiddle -

  It reads the Base-64 PNG file and returns width and height of the image but I don't know how to find orientation of the image using this method.

Ref. this answer

Can anyone please point me in right direction? Any help is much appreciated.

Answer 1

Prerequisites

There is of course a dependency here on the device that takes the picture that it actually has a sensor that can tell orientation.

Some cameras do others don't. And even if it does have a sensor there is no guarantee EXIF will be embedded in the image. EXIF is not embedded for PNG for example and some upload JPEG images where EXIF is removed for privacy and/or size reasons (eg. GPS coordinates etc.). Photoshop will remove EXIF if saved out using its "Save for web" option.

Try different EXIF components

There is also the possibility that the EXIF component you are using has a bug. Try other EXIF readers out there as well to eliminate this:

• code.flickr.com
• ExifReader
• exif-js

(and there are a ton of others).

Detecting "raw" orientation

In case you only have an "raw" image without any EXIF information (ie. PNG, TIFF, BMP) you can at least determine the orientation of the image bitmap itself by doing this:

function isPortrait(img) {
    var w = img.naturalWidth || img.width,
        h = img.naturalHeight || img.height;
    return (h > w);
}

Just pass the uploaded image element to the function. It will return true if in portrait or false if square or landscape.

If you only have a base64 encoded data-uri just set that as source directly on an image element:

var img = document.createElement('img');
img.onload = function() {
    alert(isPortrait(img));
}
img.src = <data-uri-here>;

Automatic detection

To automatically detect orientation based on content is a very hard thing to do and there has been many attempts doing this with professional approaches and open source approaches. But they never work 100%.

You will need quite a bit of algorithms to detect and recognize shapes, lines, other objects. A huge project!

However, if your subjects are mostly person/faces you can implement face detection. If you don't detect any at the first pass rotate 90 degrees and try again. If you get a match then you can use this as basis to do a "good guess" (see for example this library to do face detection)