Resizing and cropping image with GD while retaining aspect ratio

Question

I'm currently coding an uploader script based on Uploadify. Right now I resize the given image and watermark one of the sizes. It all works well, but I need the script to resize the height and then crop the width so that the aspect ratio does not get messed up.

This is my code so far:

if ($fileExtension == "jpg" || 
        $fileExtension == "jpeg" || 
        $fileExtension == "png" || 
        $fileExtension == "gif"){

        // GD variables:
        list($width, $height, $type) = GetImageSize($uploadedFile['tmp_name']);

        // Image sizes:
        $bigImage = array(800, 453);
        $mediumImage = array(410, 231);
        $listImage = array(120, 68);
        $thumbnail = array(90, 51);

        $sourceAspect = $width / $height;
        $bigAspect = $bigImage[0] / $bigImage[1];
        $mediumAspect = $mediumImage[0] / $mediumImage[1];
        $listAspect = $listImage[0] / $listImage[1];
        $thumbnailAspect = $thumbnail[0] / $thumbnail[1];

        // Image is PNG:
        if ($type == IMAGETYPE_PNG){
            $image = imagecreatefrompng($uploadedFile['tmp_name']);
            $valid = true;
        }

        // Image is JPEG:
        else if ($type == IMAGETYPE_JPEG){
            $image = imagecreatefromjpeg($uploadedFile['tmp_name']);
            $valid = true;
        }

        // Image is GIF:
        else if ($type == IMAGETYPE_GIF){
            $image = imagecreatefromgif($uploadedFile['tmp_name']);
            $valid = true;
        }

        // Format not allowed:
        else {
            $valid = false;
        }

        // Start creating images:
        if ($valid){

            // Get size:
            $imageSize = getimagesize($uploadedFile['tmp_name']);

            // Generate canvas:
            $bCanvas = imagecreatetruecolor($bigImage[0], $bigImage[1]);
            $mCanvas = imagecreatetruecolor($mediumImage[0], $mediumImage[1]);
            $lCanvas = imagecreatetruecolor($listImage[0], $listImage[1]);
            $tCanvas = imagecreatetruecolor($thumbnail[0], $thumbnail[1]);

            // Copy content:
            imagecopyresampled($bCanvas, $image, 0, 0, 0, 0, ($bigImage[0] * $sourceAspect), ($bigImage[1] / $sourceAspect), $imageSize[0], $imageSize[1]);
            imagecopyresampled($mCanvas, $image, 0, 0, 0, 0, $mediumImage[0], $mediumImage[1], $imageSize[0], $imageSize[1]);
            imagecopyresampled($lCanvas, $image, 0, 0, 0, 0, $listImage[0], $listImage[1], $imageSize[0], $imageSize[1]);
            imagecopyresampled($tCanvas, $image, 0, 0, 0, 0, $thumbnail[0], $thumbnail[1], $imageSize[0], $imageSize[1]);

            // Save images:
            $saveB = imagejpeg($bCanvas, $targetFile.'_big.jpg', 90);
            $saveM = imagejpeg($mCanvas, $targetFile.'_medium.jpg', 90);
            $saveT = imagejpeg($lCanvas, $targetFile.'_list.jpg', 90);
            $saveT = imagejpeg($tCanvas, $targetFile.'_thumb.jpg', 90);

            // Destroy images:
            imagedestroy($image);
            imagedestroy($bCanvas);
            imagedestroy($mCanvas);
            imagedestroy($lCanvas);
            imagedestroy($tCanvas);

            // Watermark images:
            $mark = imagecreatefrompng("logo.png");
            list($mwidth, $mheight) = getimagesize("logo.png");
            $img = imagecreatefromjpeg($targetFile.'_big.jpg');

            list($bwidth, $bheight) = getimagesize($targetFile.'_big.jpg');
            imagecopy($img, $mark, $bwidth-$mwidth-25, $bheight-$mheight-25, 0, 0, $mwidth, $mheight);
            imagejpeg($img, $targetFile.'_big.jpg', 100);
            imagedestroy($img);

        } else {
            echo "0";
        }

    } else {
        move_uploaded_file($tempFile,$targetFile.'.'.$fileExtension);
    }

I would be really happy if someone could help me solve this. I've been trying several methods but none of them seemed to work properly. As you can see in the top I have already defined the canvas sizes that I want to use in the variables "bigImage", "mediumImage", "listImage" and "thumbnail".

Thanks in advance! // Jonathan

Answer 1

There is more than one way to resize an image. I'll spell them out for you:

• Stretch to fit -- the image is resized to the desired size ignoring aspect ratio
• Scale to fit -- the image is resized so that one dimension (width or height) has the desired size while the other is same or shorter while maintaining aspect ratio (one extra step may be required to fill the shorter side with solid color)
• Crop to fit -- the image is resized so that one dimension (width or height) has the desired size while the other is same or longer while maintaining aspect ratio (one extra step is required to trim the outside region)

PS: both articles were written by me.