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.
Images might display sideways or upside down after uploading them to your website thanks to the picture being taken on a phone or camera that is in landscape mode. While most image viewers will automatically rotate the image to the correct orientation when viewing it, most internet browsers do not.
The reason your photo would appear this way is because the photo was taken that way (either with the phone sideways or upside down) and the image file itself is in this orientation. For example, if you hold your phone upright and take a photo, the photo is saved in portrait mode or "sideways".
Why Are My iPhone Photos Upside Down? You can get upside-down photos in your Photos app for several reasons: You tilted your iPhone at a strange angle while taking the shot, and the Camera sensors weren't able to determine which direction was right side up.
An upside-down picture is a picture (or figure) that, when inverted, looks the same or changes into the picture of a different subject. Possibly the most remarkable examples of upside-down art were the cartoons drawn by Gustave Verbeek for the Sunday New York Herald in the early 1900s.
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 });
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With