Fixing Rotated Mobile Image Uploads In PHP

Photo by Mike Fox on Unsplash. [Modified]

I recently experienced an issue on a web application I was working on where users who took photos directly from their mobile devices had it rotated 90° once it was uploaded and put in an <img> tag.

It turns out the reason for this is the EXIF (exchangeable image file format) information for orientation that is set on the images by the phone’s digital camera. The camera alters the EXIF Orientation Tag to indicate the orientation of the captured scene, which may cause the orientation to show differently in an <img> tag on your web app, depending on if the browser obeys the orientation rule or not.

Solution 1 — Reading EXIF data

One way to fix the rotation issue in PHP is to manually read the EXIF data and rotate the image accordingly. Here’s a great function created by Wes on Stack Overflow that does just this:

function correctImageOrientation($filename) {
  if (function_exists('exif_read_data')) {
    $exif = exif_read_data($filename);
    if($exif && isset($exif['Orientation'])) {
      $orientation = $exif['Orientation'];
      if($orientation != 1){
        $img = imagecreatefromjpeg($filename);
        $deg = 0;
        switch ($orientation) {
          case 3:
            $deg = 180;
            break;
          case 6:
            $deg = 270;
            break;
          case 8:
            $deg = 90;
            break;
        }
        if ($deg) {
          $img = imagerotate($img, $deg, 0);        
        }
        // then rewrite the rotated image back to the disk as $filename 
        imagejpeg($img, $filename, 95);
      } // if there is some rotation necessary
    } // if have the exif orientation info
  } // if function exists      
}

The function above uses the PHP in-built exif_read_data() function to read the Orientation EXIF data from the image, and uses imagerotate and imagejpeg to recreate the image with the correct orientation.

To use the function:

move_uploaded_file($uploadedFile, $destinationFilename);
correctImageOrientation($destinationFilename);

Solution 2— Intervention to the rescue

Another fix to the rotation issue is to use this PHP Intervention package. From their docs:

Intervention Image is an open source PHP image handling and manipulation library. It provides an easier and expressive way to create, edit, and compose images.

From the installation guide for Intervention, you can install it with Composer using this command:

php composer.phar require intervention/image

Here’s an example of how to use the orientate() method to automatically read the EXIF data and perform a rotation on the image to display the image correctly in a Laravel application:

$file = $request->file('image');
$image = \Image::make($file);
// perform orientation using intervention
$image->orientate();
$imageName = "image_name." . $file->getClientOriginalExtension();
$destinationPath = public_path("/uploads");
// save image
$image->save($destinationPath . $imageName);

Conclusion

EXIF data contains a bunch of useful information and it works great for determining the proper orientation of images before saving them.

Do you have any other tips for managing this orientation issue for uploads? Or do you use EXIF data for any other interesting thing? Let’s discuss in the comments.