How to extract image orientation information from an image uploaded to a canvas

Question

I am creating a web application in which it allows you to upload images directly to the canvas. Sometimes, when images are downloaded from an iPad or other similar devices, they are oriented differently.

I am trying to find a way to extract information about my orientation and rotate the image in the canvas accordingly.

What I tried:

• I tried to extract the 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 a Base-64 PNG file and returns the width and height of the image, but I don't know how to find the orientation of the image using this method.

Ref. this answer

Can someone point me in the right direction? Any help is greatly appreciated.

Answer 1

Prerequisites

On the device, of course, there is a dependency that takes a picture, that in fact there is a sensor that can determine the orientation.

Some cameras do not. And even if it has a sensor, there is no guarantee that EXIF ​​will be embedded in the image. EXIF is not built-in for PNG, for example, and some upload JPEG images, where EXIF ​​is deleted for reasons of privacy and / or size (for example, GPS coordinates, etc.). Photoshop will remove EXIF ​​if saved using the Save For Web option.

Try using other EXIF ​​components

There is also the possibility that the EXIF ​​component you are using has an error. Try other EXIF ​​readers to fix this:

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

(and there is a ton of others ).

Raw orientation detection

If you only have a raw image without any EXIF ​​information (such as PNG, TIFF, BMP), you can at least determine the orientation of the bitmap itself by doing the following:

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

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

If you only have base64 encoded uri data, just set this as the source directly in the image element:

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

Auto discovery

To automatically determine the orientation based on the content is very difficult to do, and there have been many attempts to do this using professional and open source approaches. But they never work 100%.

You will need quite a few algorithms to detect and recognize shapes, lines, and other objects. Huge project!

However, if your subjects are mostly faces / faces, you can implement face recognition. If you do not find any in the first pass, turn 90 degrees and try again. If you get a match, you can use this as the basis for “good guessing” (see, for example, this library for detecting faces )

Answer 2

For this, I could not get orientation information because I did not use the original image. Instead, I used image compression using an HTML canvas object. I used the original uploaded image and started working.