Images turning sideways/upside down after being uploaded via PhoneGap (iOS)

Question

Not sure what would be causing this, but when I upload some images to my remote server via FileTransfer(), the images sometimes show up either sideways or upside down. However, when I view the images locally on the iPhone, they are positioned in the correct way.

For example, when I select an image like this to upload: http://sharefa.st/view/WBe2QNSK8r8z

It will turn out like this: http://sharefa.st/view/EWdW1Z4G8r8z

I am using the local path to transfer the file, so I don't understand why the image would rotate "randomly".

Here is my upload function:

function uploadPhoto() {

    var options = new FileUploadOptions();
    options.fileKey  = 'file';
    options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
    options.mimeType = 'image/jpeg';

    var params = new Object();

    if(logged_in == true) {

        params.unique_id  = app_unique_id; 
        params.secret_key = user_secret_key;

    }

    options.params = params;

    loadingStart();

    var ft = new FileTransfer();

    ft.upload(imgURI, 'http://' + remote_server + '/API/upload', uploadDetails, fail, options);

}

imgURI value looks like this:

file://localhost/var/mobile/Applications/<snip>/tmp/photo_015.jpg

Any insight is appreciated.

I also have the same problem on iOS, I'll dig into it soon. – Titouan de Bailleul Feb 19 '12 at 22:18 — Titouan de Bailleul, Feb 19 '12 at 22:18

score 16 · Accepted Answer · answered Feb 21 '12 at 00:39

Thanks to Humanoidism pointing out that the issue was in fact with the iPhone, and the way it stored images, I was able to figure out a solutuion.

To upload photos in the correct orientation you must add the correctOrientation setting to the options array in getPicture(), and set it to true.

Here are two examples:

function capturePhoto() {

    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });

}

function getPhoto(source) {

    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30, 
    destinationType: destinationType.FILE_URI,
    sourceType: source,
    correctOrientation: true });

}

I am using cordova 3.5.0 and i have set `correctOrientation ` to `true` but the image is flipped with the front camera on android :( — Anish, Oct 27 '14 at 10:39

score 1 · Answer 2 · answered Feb 20 '12 at 23:50

The problem is not PhoneGap but iPhone. The iPhone was designed to be used as a wide lens camera. Turn the phone sideways when taking pictures or capturing video if you intend to view them on desktop. Your phone will display them correctly, because it "knows" how you took them, but the computer that you're viewing it on dosen't.

What you could do to prevent this is to rotate the picture before the upload. This is not a recommended fix but at least people on desktop computers will be able to see it. Though when viewing them on iPhone they'll be rotated - maybe a check for mobile devices wether or not to rotate the image could come in handy - but still again, not recommended.

Images turning sideways/upside down after being uploaded via PhoneGap (iOS)

2 Answers2

Linked