Jquery mobile orientation uploaded photo - php

Question

I'm trying to upload some photo from a mobile using jquery mobile and php but after uploading my photo it's always in landscape format even if my photo is in portrait format on my iphone !
So i can't know which one must be rotated or no .
Thanks

Answer 1

I had this same problem. My solution was a little quick and dirty but here you go:
Write a function to be called when the image loads, check to see if the image is going to rendered in landscape.
$(".imgTile").load(function(){
if(this.width>this.height){
$(this).css("transform","rotate(90deg)");
$(this).css("top",".7em");
$(this).css("left","-.5em");
}
}
A couple notes: I found I had to do some repositioning to get the rotated image to fit properly into the listview (hence the setting of top and left properties) so you may need to tweak this for your needs. Second, there are different css "transform" properties for different browsers, so you may need to set each to have cross browser support. Here's a guide on those properties http://www.w3schools.com/cssref/css3_pr_transform.asp
EDIT: I took some time and came up with a much more solid solution.
First, use php to read the exif tags:
$exif=exif_read_data("uploads/$fileExtension.jpg",0,true);
$orient=$exif["IFD0"]["Orientation"];
Some research into the EXIF standard reveals that the three cases that the iPhone will generate are:
1-- requires no rotation
3-- requires 180 deg. rotation
6-- required 90 deg. rotation
Then use php's shell_exec to run the following shell script, which uses imagemagick to destroy the EXIF headers, and physically rotates the image the specified amount:
#!/bin/bash
for i in $[filename]
do convert -rotate $[number of degrees] $i $i
done
mogrify -strip $[filename]
Now, the image will be correctly oriented everywhere, and browsers that do read EXIF headers won't show it any differently.
The only thing left to do is execute the script with the correct arguments based on the tag value.
Hope this helps!