So, let me explain the situation :
I'm working on a webapp based on CakePHP (back) and AngularJS (front) (but the framework isn't relevant)
- The user have to upload an image
- We display a preview of the image (using a FileReader)
- The user can apply a filter (front side it's only a ::after with a background in css)
- Then we save it, generate the filter in php and display it so he can download it.
THE PROBLEM :
On desktop everything is perfectly ok, BUT on some mobile device when the image is upload (more often when it was instantly took by the mobile) it could be upside-down or rotate 90 degree right or left.
I've done a lot of reading on the subject (some topic on StackOverflow helped me to do it) and came to the conclusion :
JPEG got metadata "Orientation" going from 1 to 8, and this value can tell you in which angle the photo was taken
Ok perfectly fine, for my frontside i used something like :
EXIF.getData($scope.img, function() {
console.log("getData Callback ok");
var orientation = EXIF.getTag(this, "Orientation");
if(typeof orientation != 'undefined'){
$rootScope.user.orientation = orientation;
if(orientation == 6 || orientation == 5)
$rootScope.user.angle = -90;
if(orientation == 8 || orientation == 7)
$rootScope.user.angle = 90;
if(orientation == 3 || orientation == 4)
$rootScope.user.angle = 180;
if(orientation == 1 || orientation == 2)
$rootScope.user.angle = 0;
console.log("Orientation defined");
console.log("Orientation : " + orientation);
} else {
console.log("Orientation undefined");
}
});
The EXIF is from a library : http://ift.tt/2bSa8WT
And it worked, but at my work we got a lot of devices to test, and it hit me like a rock :
All mobile don't give the same EXIF data for Orientation even if it's the same in real...
My code have been working for devices like Samsung S4 and not for iPad Mini
So, the question in a nutshell :
How do I know how many degree i have to turn my image ? (Cross Browser, Cross Devices, Cross Everything)
PS : First time I asked something on SO so please if I made any mistake in my topic tell me :) !
PSS : My english is a mess, sorry
Aucun commentaire:
Enregistrer un commentaire