PHP Uploading a Large image and resizing with proportion like Photoshop

Question

A quick brief. We currently have to make small, medium and large images based on product images we have on our site. Not being a wiz on PHP I thought I would still try to automate this nightmare.

The image we upload and dimension of the thumb is below

800 width x 1400 width LARGE
300 width x 525 width  THUMB

The problem with my PHP script is that it just resizes with scaling to proportion. I want to it to be able to scale down like in Photoshop, you just click shift and the image scales. I am trying to use imagecopyresized but with little luck.

<?php
// PHP UPLOAD SCRIPT

// VALIDATION OF FORM

if($_FILES['user_image']['type'] == "image/jpeg" && $_FILES['user_image']['size'] < 3000000)
{
    // VARS
    $target_folder = 'images/'; 
    $upload_image = $target_folder.basename($_FILES['user_image']['name']); 

    // UPLOAD FUNCTION
    if(move_uploaded_file($_FILES['user_image']['tmp_name'], $upload_image)) 
    {

        // VARS FOR FILE NAMES
        $thumbnail = $target_folder."medium_x.jpg";
        $actual = $target_folder."large_x.jpg";

      // THUMBNAIL SIZE
        list($width, $height) = getimagesize($upload_image);
        $newwidth = "300"; 
        $newheight = "525";

        // VARS FOR CALL BACK
        $thumb = imagecreatetruecolor($newwidth, $newheight);
        $source = imagecreatefromjpeg($upload_image);

        // RESIZE WITH PROPORTION LIKE PHOTOSHOP HOLDING SHIFT
        imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);

        // MAKE NEW FILES
        imagejpeg($thumb, $thumbnail, 100);

        // FILE RENAMES
        rename($upload_image, $actual);

        {

            // SUCCESS MESSAGES
            ?>

            <p>
                Image Successfully uploaded!<br />
                Actual image: <?=$actual;?><br />
                Thumbnail image: <?=$thumbnail;?><br />

                <h1>Large</h1>
                <img src="<?=$actual;?>"/><br /><br />
                <h1>Medium</h1>
                <img src="<?=$thumbnail;?>"/><br /><br />
            </p>

            <?
        }
        // FAILED MESSAGES
    }
    else
    {
        echo 'Upload failed.';
    }
}
else
{
        // NOT A JPEG
        echo 'Not a JPEG';
}

// END OF SCRIPT
?>

How can I resize properly without having a stretched image? Is it possible?

Answer 1

The easiest way to achieve this without buckets of PHP code is with Image Magick. See examples and sample command line here: http://www.imagemagick.org/Usage/resize/#fill

(can call from PHP using exec() or similar)

Edit: Implementation as follows:

if($_FILES['user_image']['type'] == "image/jpeg" && $_FILES['user_image']['size'] < 3000000)
{
    // VARS
    $target_folder = 'images/'; 
    $upload_image = $target_folder.basename($_FILES['user_image']['name']);

    $thumbnail = $target_folder."medium_x.jpg";
    $actual = $target_folder."large_x.jpg";

    $newwidth = "300"; 
    $newheight = "525";

    if(move_uploaded_file($_FILES['user_image']['tmp_name'], $upload_image)) 
    {
        exec('convert '.$upload_image.' -resize '.$newwidth.'x'.$newheight.'^ '.$thumbnail);
        rename($upload_image, $actual);
    }
}
...
etc

You could optimise the way you handle the upload but I didn't want too totally change the structure of your code as I don't know what surrounds it. But basically, you push the image to ImageMagick's convert, and it will work it's magic.

If you want to crop as well as scale, the exec command would be:

exec('convert '.$upload_image.' -resize '.$newwidth.'x'.$newheight.'^ -gravity center -extent '.$newwidth.'x'.$newheight.' '.$thumbnail);

Answer 2

Look at this code snippet. Does what you need. Basically used to maintain ratio when creating the thumb. http://snipplr.com/view/753/