Upload photo taken by mobile shows rotated image

Question

I have a system with a Photo Upload page. It’s a simple photo upload where you click on input, selects the image and end. After just submitting the form, the image is saved in a folder, and in another html file it happens to appear in the photo path, displaying it inside a tag img.

If used on a mobile phone or tablet, the operation is equal, the difference is that appears the option to take the photo with the camera, and soon after it recovers the image exactly as it was taken and sent.

Everything works very well, except that it had a system user, that when taking the photos, the system recovered the picture lying down, being that took the picture standing up. I went to save the image on the pc to do tests, and the image came the right way. However, when uploading it, it appears again lying down. All this without making any modifications to the file.

Any image that I take a photo of my phone, or pick up on the internet is displayed correctly. Only photos taken by this user’s tablet are displayed lying down. Even if I try to check the photo with Sublime Text, it displays the picture lying (rotated). I believe it is something of the photo setup, which is set by Android. I searched on, but found nothing specific.

What makes the photo show that way?

Answer 1

If the photo was created with some kind of digital camera, it probably has goals that inform the rotation of the camera at the time of the click. You can use this criterion to correct the rotation in your app.

The Exifinterface stores this information on Android.

ExifInterface exif = new ExifInterface(uri.getPath());
int rotation = exif.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
// converte para graus
private static int exifToDegrees(int exifOrientation) {        
  if (exifOrientation == ExifInterface.ORIENTATION_ROTATE_90) { return 90; } 
  else if (exifOrientation == ExifInterface.ORIENTATION_ROTATE_180) {  return 180; } 
  else if (exifOrientation == ExifInterface.ORIENTATION_ROTATE_270) {  return 270; }            
return 0;     
} 
int rotationInDegrees = exifToDegrees(rotation);
ImageView imageId = (ImageView) findViewById(R.id.imageId) ;
picasso.load("URL").rotate(degrees).into(imageId) ;

Good luck.

Answer 2

If you wanted to check the goals using PHP at the server level, you can use the exif_read_data function.

See in: https://secure.php.net/manual/en/function.exif-read-data.php

There is even an example in the link talking about the orientation of the photo.