Pictures rotating 90 degrees

[TapeGun007]

So I have an Iphone 7.  I was testing some php code, which works just fine, I'll include that at the end, but for whatever reason, when I load up the website with that newly resized image, it's been rotated 90 degrees to the left.  It's driving me crazy.  Any ideas?

 

 

 

<?php
/**
 * Resize image class will allow you to resize an image
 *
 * Can resize to exact size
 * Max width size while keep aspect ratio
 * Max height size while keep aspect ratio
 * Automatic while keep aspect ratio
 */
class ResizeImage
{
private $ext;
private $image;
private $newImage;
private $origWidth;
private $origHeight;
private $resizeWidth;
private $resizeHeight;


/**
* Class constructor requires to send through the image filename
*
* @param string $filename - Filename of the image you want to resize
*/
public function __construct( $filename )
{
if(file_exists($filename))
{
$this->setImage( $filename );
} else {
throw new Exception('Image ' . $filename . ' can not be found, try another image.');
}
}


/**
* Set the image variable by using image create
*
* @param string $filename - The image filename
*/
private function setImage( $filename )
{
$size = getimagesize($filename);
$this->ext = $size['mime'];


switch($this->ext)
   {
    // Image is a JPG
       case 'image/jpg':
       case 'image/jpeg':
        // create a jpeg extension
           $this->image = imagecreatefromjpeg($filename);
           break;


       // Image is a GIF
       case 'image/gif':
           $this->image = @imagecreatefromgif($filename);
           break;


       // Image is a PNG
       case 'image/png':
           $this->image = @imagecreatefrompng($filename);
           break;


       // Mime type not found
       default:
           throw new Exception("File is not an image, please use another file type.", 1);
   }


   $this->origWidth = imagesx($this->image);
   $this->origHeight = imagesy($this->image);
}


/**
* Save the image as the image type the original image was
*
* @param  String[type] $savePath     - The path to store the new image
* @param  string $imageQuality    - The qulaity level of image to create
*
* @return Saves the image
*/
public function saveImage($savePath, $imageQuality="100", $download = false)
{
   switch($this->ext)
   {
       case 'image/jpg':
       case 'image/jpeg':
        // Check PHP supports this file type
           if (imagetypes() & IMG_JPG) {
               imagejpeg($this->newImage, $savePath, $imageQuality);
           }
           break;


       case 'image/gif':
        // Check PHP supports this file type
           if (imagetypes() & IMG_GIF) {
               imagegif($this->newImage, $savePath);
           }
           break;


       case 'image/png':
           $invertScaleQuality = 9 - round(($imageQuality/100) * 9);


           // Check PHP supports this file type
           if (imagetypes() & IMG_PNG) {
               imagepng($this->newImage, $savePath, $invertScaleQuality);
           }
           break;
   }


   if($download)
   {
    header('Content-Description: File Transfer');
header("Content-type: application/octet-stream");
header("Content-disposition: attachment; filename= ".$savePath."");
readfile($savePath);
   }


   imagedestroy($this->newImage);
}


/**
* Resize the image to these set dimensions
*
* @param  int $width         - Max width of the image
* @param  int $height        - Max height of the image
* @param  string $resizeOption - Scale option for the image
*
* @return Save new image
*/
public function resizeTo( $width, $height, $resizeOption = 'default' )
{
switch(strtolower($resizeOption))
{
case 'exact':
$this->resizeWidth = $width;
$this->resizeHeight = $height;
break;


case 'maxwidth':
$this->resizeWidth  = $width;
$this->resizeHeight = $this->resizeHeightByWidth($width);
break;


case 'maxheight':
$this->resizeWidth  = $this->resizeWidthByHeight($height);
$this->resizeHeight = $height;
break;


default:
if($this->origWidth > $width || $this->origHeight > $height)
{
if ( $this->origWidth > $this->origHeight ) {
     $this->resizeHeight = $this->resizeHeightByWidth($width);
   $this->resizeWidth  = $width;
} else if( $this->origWidth < $this->origHeight ) {
$this->resizeWidth  = $this->resizeWidthByHeight($height);
$this->resizeHeight = $height;
}  else {
$this->resizeWidth = $width;
$this->resizeHeight = $height; 
}
} else {
           $this->resizeWidth = $width;
           $this->resizeHeight = $height;
       }
break;
}


$this->newImage = imagecreatetruecolor($this->resizeWidth, $this->resizeHeight);
     imagecopyresampled($this->newImage, $this->image, 0, 0, 0, 0, $this->resizeWidth, $this->resizeHeight, $this->origWidth, $this->origHeight);
}


/**
* Get the resized height from the width keeping the aspect ratio
*
* @param  int $width - Max image width
*
* @return Height keeping aspect ratio
*/
private function resizeHeightByWidth($width)
{
return floor(($this->origHeight/$this->origWidth)*$width);
}


/**
* Get the resized width from the height keeping the aspect ratio
*
* @param  int $height - Max image height
*
* @return Width keeping aspect ratio
*/
private function resizeWidthByHeight($height)
{
return floor(($this->origWidth/$this->origHeight)*$height);
}
}


$resize = new ResizeImage('testimage.jpg');
$resize->resizeTo(100, 100, 'maxWidth');
$resize->saveImage('testimage.jpg');
?>

 

[Destramic]

i'd check the orginal image orientation before uploading...as i can't see anything obvious that would rotate the image before saving

 

the image may have embedded image rotation infomation set by your phone.

 

 

check for orientation key

print_r(exif_read_data($filename));

i come across this function also which may help.

function image_fix_orientation(&$image, $filename) {
    $exif = exif_read_data($filename);

    if (!empty($exif['Orientation'])) {
        switch ($exif['Orientation']) {
            case 3:
                $image = imagerotate($image, 180, 0);
                break;

            case 6:
                $image = imagerotate($image, -90, 0);
                break;

            case 8:
                $image = imagerotate($image, 90, 0);
                break;
        }
    }
}

Edited January 11, 2017 by Destramic

[ginerjm]

IIRC there is something about the iphone in the ways it tags pics when you take them the "wrong" way. They designed it to indicate that they s/b landscape but when you upload them they get interpreted as portrait. Were this pics taken as portrait?

 

Don't remember how I tackled this but that may be your problem. Somewhere between Apple and html and how things are being interpreted.

[TapeGun007]

Yes, I took it in portrait.  The original image shows just fine.  I wish you could remember! ;-)

 

I just read this article that has nothing to do with php coding per se...

 

 

In theory, then, you could open that photo with an application, it would look at the Exif tags, and then present the photo in the correct rotation to you. The image data is saved in its original, unrotated form, but the Exif tag allows applications to correct it.

Not Every Program Is On the Same Page

Unfortunately, not every piece of software obeys this Exif tag. Some programs–especially older image programs–will just load the image and ignore the Exif Orientation tag, displaying the image in its original, unrotated state. Newer programs that obey Exif tags will show the image with its correct rotation, so an image may appear to have different rotations in different applications.

Edited January 12, 2017 by TapeGun007

[Destramic]

There is probably a much easier way but why don't you check the phone make is apple and image is portrait then just rotate?

 

Wouldn't be a bad solution if the script is only for your personal use...although would be nice to make the script universal

[requinix]

There is probably a much easier way but why don't you check the phone make is apple and image is portrait then just rotate?

If you're in there looking at the EXIF data anyways you might as well do the right thing and check the orientation.

 

[edit] Oh, and there's a more significant issue: just because the photo was taken was an iPhone (a) doesn't mean that it is rotated at all, or if it was (b) tell you which way it is rotated.

Edited January 12, 2017 by requinix

[maxxd]

My wife has an iPhone 6, and for some odd reason any images she'd post to Facebook for a while were showing up either rotated 90 or 180 degrees. No obvious rhyme or reason for it.

 

Not much help to you, I know, but at least you know you're not alone with the issue...

[requinix]

Yeah, their choice to not actually rotate the image data but to indicate it in EXIF data is baffling. If anything the EXIF should tell the original orientation of the device - acting as supplemental data, not required information.

[Psycho]

Have you tried displaying BOTH the original image and the resized images? My guess is that the original image will display with the correct orientation, but the resized image will not because the original image has the required EXIF data that the browser is applying while the resized image does not. The user manual for imagecreatefromjpeg() has the following user contributed note:

 

This function does not honour EXIF orientation data.  Pictures that are rotated using EXIF, will show up in the original orientation after being handled by imagecreatefromjpeg().  Below is a function to create an image from JPEG while honouring EXIF orientation data

 

Even though an image displays correctly on the iPhone does not mean it is really saved that way. The camera has a specific orientation and I suspect all images are saved with that default orientation. All the rotation implementation is likely just software based.

 

For a PHP application, I would not rely upon EXIF information to determine how an image is displayed. I would instead convert the image (as the example with that note would do) so it does not depend on rotation. The reason is if you need to do any logic on the size of the image it would be more complicated. For example, if you will create the output differently based on the width of an image you would have to first check the EXIF data to determine if you should check the "width" or the "height" of the image based on what is the real width when displayed

 

Since you already have a process to resize the original image go ahead and rotate the new image accordingly. If you also save the original image, then you should replace it with one that is not rotated as well.

Edited January 12, 2017 by Psycho