Handle image rotation on mobile
We will see in this article a solution to a recurring problem we had at Wassa during the deployment of our website on mobile and tablet platforms.
What do we mean by handling image rotation?
- On some of our product websites, like Deeplytics or Pixlytics, our clients are able to upload a picture with an “input” html tag of type “file”. The picture is then used by our image processing algorithms to detect a face, for instance.
- The picture is uploaded, but when it is drawn in the canvas, it is sometimes displayed with thewrong orientation: portrait instead of landscape.
- The picture is sent to our server with a wrong orientation, making our home-made algorithm not able to recognize the face. Also in some cases, the server triggers an error.
Browsers don’t handle the image rotation
Web browsers like Chrome, Safari or Firefox, don’t handle natively the orientation of a picture. The orientation data are simply available in the EXIF part of the picture.
Natively, a picture is always in the landscape format — the portrait format does not exist. When a picture is taken from a mobile phone and uploaded from to our website, it is rotated with an angle of -90° by default. The picture is natively rotated when drawn on a canvas for user feedback.
How did we fix this issue ?
To fix our problem, our investigations lead us to a light Javascript library called exif-js (see on Github).
This library give us access to the EXIF data in a picture and allow us to rotate it in the right orientation with a simple script. The rotation is done before displaying it as user feedback. Of course, this is only a visual solution, the original picture will always be sent to our servers. It is necessary to apply a similar solution server-side before the picture is processed by our algorithms.
We chose to keep the original picture so our clients don’t have an interference feeling on how we process medias.
Let’s take here the example of a simple form (including CDN jQuery/Bootstrap and the exif.js library)
Now with the handling of the input’s change event:
We create a fileReader to generate the picture preview:
Finally a function to detect the right orientation and rotation with the right angle:
The picture is finally drawn with the correct orientation!
However, let’s keep in mind the picture is still sent to the server with its original orientation. It is necessary to correct the orientation once it is received by the server and before algorithm computing.
Do you want to know more about Wassa?
Find us on:
