Correctly handle the orientation of automatically rotated portrait photos in Android Titanium apps.

Published in

All Titanium

3 min readJan 14, 2017

Portrait pictures turned into landscape mode after capturing

Most of the Titanium devs are well aware of an issue which turns portrait pictures taken by camera into landscape mode automatically on some Android devices.

It really makes devs crazy when they see this issue first time and it can waste their valuable time then. Some Android devices, or more precisely the device models/manufacturers which matters a large user-space for your app, have this issue so it may or may not happen on all Android devices.

Before starting further, I like to clear the fact that this is actually not an issue of Titanium, it also occurs in native Android.

Recently while working on a cross-platform app, I faced this weird issue (which was actually due to the device I used for that app) and luckily I found that Titanium has plenty of solutions to fix this issue, and it depends on your app’s use-case that which solution works out best for you.

Let’s look at the below 2 use-cases and their solutions of pictures taken from gallery or device camera:

1 ~ Simply show the image in Ti.UI.ImageView & forget about the further use of this image.

Ti.UI.ImageView has a property called as autorotate, just set this property to true and you are all good.
Note: I have also noticed that setting this property may or may not work while using Alloy, but it always works using Titanium Classic like this:

var im = Ti.UI.createImageView({
    image : e.media,
    autorotate : true
});
    
$.IMAGE_PARENT_VIEW.add(im);

2 ~ Capture picture and use it further for compress or crop or get its thumbnail.

There are many modules available to fix it for this use-case. Here are the few:

For the above modules, there could be the case that you only get media blob instead of a file object holding your image, which may restrict you further using the image for other processing like manual cropping (in case you need squarely cropped image) using this module: https://github.com/hyperlab/TiImageCropper.

So here is the final & simplest solution for all scenarios which works without any third party module or any dependency.

function cameraGallerySuccessCB(e) {
    var finalImageFile = fixImage(e.media);
    
    // now you can use this image to show it in image view
    $.IMAGE_VIEW.image = finalImageFile.read();    // OR you can pass it to some crop-module like below
    require('se.hyperlab.imagecropper').open({
         image : finalImageFile.read(),
         cancel : function(ex) {},
         error : function(ex) {},
         success : function(ex) {
             $.IMAGE_VIEW.image = finalImageFile.read();
         }
     });
}function fixImage(media) {
    // this is where magic happens using in-built method of Ti.Blob
    var correctOrientationPic = media.imageAsResized(media.width, media.height);var tempFile = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, 'temp_profile.jpg');
    tempFile.write(correctOrientationPic);
    
    correctOrientationPic = null;    return tempFile;
}

That’s all for this issue. A simple in-built fix and no more headaches and surprises on seeing your portrait image turned into landscape mode. Hope my first article here will help someone in need. :)

Suggestions are welcomed!

Correctly handle the orientation of automatically rotated portrait photos in Android Titanium apps.

Written by Prashant