Well this is new. Uploading photos from smartphones not possible?

Question

So I am creating a responsive website that has the option of uploading images to the page. The php script basically resizes the the image and stores a thumb file path in the database. The original image and thumb image are also stored in the website folder. I am using GD library.

Anyhow, I was just doing a test of uploading a photo from my iphone to the website. It does upload the image. However there are two issues with it.

1. It takes way too long to upload a photo.
2. The photo is oriented sideways after it's done uploading. If the photo was portrait, it'll upload as landscape. Weird.

Can anyone help me with these two issues?

UPDATE CODE

if (isset($_FILES['image'])) {

    if (empty($_FILES['image']['name'])) {

            ?><div class="add-errors">Please choose an image!</div><?php 

    }   else {


        function getOrientedImage($imagePath){
            $image = imagecreatefromstring(file_get_contents($imagePath));
            $exif = exif_read_data($imagePath);
            if(!empty($exif['Orientation'])) {
                switch($exif['Orientation']) {
                    case 8:
                        $image = imagerotate($image,90,0);
                        break;
                    case 3:
                        $image = imagerotate($image,180,0);
                        break;
                    case 6:
                        $image = imagerotate($image,-90,0);
                        break;
                }
            }
            return $image;
        }

        $name       =   $_FILES['image']['name'];
        $temp       =   $_FILES['image']['tmp_name'];
        $type       =   $_FILES['image']['type'];
        $size       =   $_FILES['image']['size'];
        $ext        =   strtolower(end(explode('.', $name)));
        $size2      =   getimagesize($temp);
        $width      =   $size2[0];
        $height     =   $size2[1];
        $upload     =   md5( rand( 0, 1000 ) . rand( 0, 1000 ) . rand( 0, 1000 ) . rand( 0, 1000 ));

        // Restrictions for uploading
        $maxwidth   =   6000;
        $maxheight  =   6000;
        $allowed    =   array('image/jpeg', 'image/jpg', 'image/png', 'image/gif');

        // Recognizing the extension
        switch($type){

            // Image/Jpeg
            case 'image/jpeg':
                    $ext= '.jpeg';
            break;

            // Image/Jpg
            case 'image/jpg':
                    $ext= '.jpg';
            break;

            // Image/png
            case 'image/png':
                    $ext= '.png';
            break;

            // Image/gif
            case 'image/gif':
                    $ext= '.gif';
            break;
        }

        // upload variables
        $path           =   $userDir . $upload . $ext;
        $thumb_path     =   $userDir . 'thumb_' . $upload . $ext;

        // check if extension is allowed.
        if (in_array($type, $allowed)) {

            // Checking if the resolution is FULLHD or under this resolution.
            if ($width <= $maxwidth && $height <= $maxheight) {
                if ($size <= 5242880) {

                    // check the shape of the image
                    if ($width == $height) {$shape = 1;}
                    if ($width > $height) {$shape = 2;}
                    if ($width < $height) {$shape = 2;}

                    //Adjusting the resize script on shape.
                    switch($shape) {

                        // Code to resize a square image.
                        case 1:
                            $newwidth =     690;
                            $newheight =    690;
                        break;

                        // Code to resize a tall image
                        case 2:
                            $newwidth   =   690;
                            $ratio      =   $newwidth / $width;
                            $newheight  =   round($height * $ratio);

                        break;

                    }

                    // Resizing according to extension.
                    switch ($type) {

                        // Image/Jpeg   
                        case 'image/jpeg';
                            $img =      getOrientedImage($temp);
                            $thumb =    imagecreatetruecolor($newwidth, $newheight);
                                        imagecopyresized($thumb, $img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
                                        imagejpeg($thumb, $thumb_path);
                        break;

                        // Image/Jpg    
                        case 'image/jpg';
                            $img =      getOrientedImage($temp);
                            $thumb =    imagecreatetruecolor($newwidth, $newheight);
                                        imagecopyresized($thumb, $img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
                                        imagejpeg($thumb, $thumb_path);
                        break;

                        // Image/png    
                        case 'image/png';
                            $img =      getOrientedImage($temp);
                            $thumb =    imagecreatetruecolor($newwidth, $newheight);
                                        imagecopyresized($thumb, $img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
                                        imagepng($thumb, $thumb_path);
                        break;

                        // Image/gif    
                        case 'image/gif';
                            $img =      getOrientedImage($temp);
                            $thumb =    imagecreatetruecolor($newwidth, $newheight);
                                        imagecopyresized($thumb, $img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
                                        imagegif($thumb, $thumb_path);
                        break;
                    }


                        // Move the original file aswell.
                        move_uploaded_file($temp, $path);


                } else {
                    ?><div class="add-errors">Your image size is too big!</div><?php
                }
            } else {
                ?><div class="add-errors">Your image resolution exceeds the limit!</div><?php
            }

        } else {
            ?><div class="add-errors">Your have uploaded a forbidden extension!</div><?php

        }

    }

}

Answer 1

You may want to look in to the exif_read_data() function, and look at the ['Orientation'] value that is returned in the array. Typically, a phone or camera that has orientation sensors store the image at one orientation or the other, and then add appropriate orientation flags to the exif data in the picture. It is then up to the image viewer or image processor to determine whether to rotate the raw picture before displaying or processing the image.

There are some great examples in the comments of that page.

Function built from one of the examples on that page:

<?php
    function getOrientedImage($imagePath){
        $image = imagecreatefromstring(file_get_contents($imagePath));
        $exif = exif_read_data($imagePath);
        if(!empty($exif['Orientation'])) {
            switch($exif['Orientation']) {
                case 8:
                    $image = imagerotate($image,90,0);
                    break;
                case 3:
                    $image = imagerotate($image,180,0);
                    break;
                case 6:
                    $image = imagerotate($image,-90,0);
                    break;
            }
        }
        return $image;
    }
?>

Also, regarding the upload time, if the device is using cell towers to transmit the data, your upload speeds are probably a fraction of your download speeds. For comparisons sake, most social networking apps resize the image before uploading, whereas your web page probably doesn't. Since phones take 8 megapixel or greater photos, that adds up to a lot of data.

Answer 2

1) Not sure if there's anything you can do about that, you upload the image the user selected. In an application I would possibly downsize the image before transmission.

2) Whatever you are looking at to view the photo (or generate thumbnails) is probably not respecting the orientation flag in the photo.