Images rotate sideways / upside down after downloading via PhoneGap (iOS)

Question

Not sure what this would cause, but when I upload some images to my remote server via FileTransfer() , the images sometimes appear either sideways or upside down. However, when I view images locally on the iPhone, they are located correctly.

For example, when I select such an image for download: http://sharefa.st/view/WBe2QNSK8r8z

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

I use the local path to transfer the file, so I don’t understand why the image will rotate “randomly”.

Here is my download 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 The value is as follows:

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

Any understanding is understood.

Answer 1

Thanks to humanoidism, indicating that the problem was actually with the iPhone, and the way the images were stored, I was able to find a solution.

To load photos in the correct orientation, you must add the correctOrientation parameter to the parameter 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 }); } 

Answer 2

The problem is not with PhoneGap, but with the iPhone. The iPhone was designed to be used as a wide-angle camera. Turn your phone to the side when shooting or capturing videos if you plan to watch them on your desktop. Your phone will display them correctly because it “knows” how you took them, but the computer on which you are viewing it does not work.

What you can do to prevent this is to rotate the image before downloading. This is not recommended, but at least people on desktop computers will be able to see it. Although when viewing them on the iPhone they will be rotated - perhaps checking on mobile devices may lead to the need to rotate the image, but again, it is not recommended.