How to Detect Shot Angle of Photo, and Auto Rotate for Website Display Like Desktop Apps Do on Viewing

How to detect shot angle of photo, and auto rotate for website display like desktop apps do on viewing?

In order to do that, you must read the EXIF information out of the JPEG file. You can either do that with exif PHP extension or with PEL.

Basically, you have to read the Orientation flag in the file. Here is an example using the exif PHP extension and WideImage for image manipulation.

<?php
$exif = exif_read_data($filename);
$ort = $exif['Orientation'];

$image = WideImage::load($filename);

// GD doesn't support EXIF, so all information is removed.
$image->exifOrient($ort)->saveToFile($filename);

class WideImage_Operation_ExifOrient
{
  /**
   * Rotates and mirrors and image properly based on current orientation value
   *
   * @param WideImage_Image $img
   * @param int $orientation
   * @return WideImage_Image
   */
  function execute($img, $orientation)
  {
    switch ($orientation) {
      case 2:
        return $img->mirror();
        break;

      case 3:
        return $img->rotate(180);
        break;

      case 4:
        return $img->rotate(180)->mirror();
        break;

      case 5:
        return $img->rotate(90)->mirror();
        break;

      case 6:
        return $img->rotate(90);
        break;

      case 7:
        return $img->rotate(-90)->mirror();
        break;

      case 8:
        return $img->rotate(-90);
        break;

      default: return $img->copy();
    }
  }
}

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile has an event that handles the change of this property... if you want to warn if someone rotates later - orientationchange

Also, after some googling, check out window.orientation (which is I believe measured in degrees...)

EDIT: On mobile devices, if you open a keyboard then the above may fail, so can use screen.availHeight and screen.availWidth, which gives proper height and width even after the keyboard is opened.

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}

How to deduce angle an image was rotated through?

As @High Performance Mark mentions in his comment, it is difficult to give an answer when it is unclear how you can recognize that the image is rotated, or what would make you decide that the rotation has properly been corrected.

In other words, you will first have to find a way to determine the rotation angle by analyzing the image with respect to specific features that inform you about a potential rotation. For example, if your image contains a face, you'd do face detection (for which there is plenty of code on the File Exchange and then rotate so that the eyes are up and the mouth down. If your image contains lines that should be vertical and/or horizontal in an un-rotated image, you can apply a Hough-transform to your image and find the most likely angle of rotation using houghpeaks.

Finally, to rotate your image, you can use imrotate.

Image showing sideways with TCPDF PHP library

I fixed this by using the following code (as suggested by Chris Haas). It will detect the orientation from the EXIF data and will rotate it based on the orientation value. This is done when the image is uploaded.

This code came from stackoverflow.com/a/18919355/1855093

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

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      
}

Exif data doesn't roate the image php

Instead of doing the 2 part (resize and rotate) in one function, I made two functions one for rotation created by Wes and then for resize. First called the rotation function and then resize function.

---

Related Topics