Resize image without distortion keeping aspect ratio then crop excess using WideImage

Question

I have an area on a site that I am working on that will display a users profile image that is pulled from an external source (therefore no control on its original size).

What I am looking to do is take an image (in this example 1000px x 800px and resize it to 200px x 150px. Obviously with this there is an aspect ratio difference.

What I want to do is resize the original image without distortion, which in this case would produce a 200px x 160px image. What I then want to do is crop any excess from the edges to produce the correct image size. So in this case crop 5px off the top and bottom of the image finally producing a 200px x 150px.

I have the WideImage library currently and would like to use that. I have seen several similar questions on SO but nothing that I can say exactly does as I am trying to achieve.

Answer 1

You might try:

$img->resize(200, 150, 'outside')->crop('center', 'middle', 200, 150);

---

Some users post their versions of calculations... Here's also my version:

$sourceWidth = 1000;
$sourceHeight = 250;

$targetWidth = 200;
$targetHeight = 150;

$sourceRatio = $sourceWidth / $sourceHeight;
$targetRatio = $targetWidth / $targetHeight;

if ( $sourceRatio < $targetRatio ) {
    $scale = $sourceWidth / $targetWidth;
} else {
    $scale = $sourceHeight / $targetHeight;
}

$resizeWidth = (int)($sourceWidth / $scale);
$resizeHeight = (int)($sourceHeight / $scale);

$cropLeft = (int)(($resizeWidth - $targetWidth) / 2);
$cropTop = (int)(($resizeHeight - $targetHeight) / 2);

var_dump($resizeWidth, $resizeHeight, $cropLeft, $cropTop);

Answer 2

I tried all of your solutions and came up with strange numbers every time. So, this is my way of doing the calculations.

Basic proportional formula: a/b=x/y -> ay = bx then solve for the unknown value. So, let's put this into code.

This function assumes you've opened the image into a variable. If you pass the path you'll have to open the image in the function, do the math, kill it, return the values and then open the image again when you resize it, that's inefficient...

function resize_values($image){
    #for the purpose of this example, we'll set this here
    #to make this function more powerful, i'd pass these 
    #to the function on the fly
    $maxWidth = 200; 
    $maxHeight = 200;

    #get the size of the image you're resizing.
    $origHeight = imagesy($image);
    $origWidth = imagesx($image);

    #check for longest side, we'll be seeing that to the max value above
    if($origHeight > $origWidth){ #if height is more than width
         $newWidth = ($maxHeight * $origWidth) / $origHeight;

         $retval = array(width => $newWidth, height => $maxHeight);
    }else{
         $newHeight= ($maxWidth * $origHeight) / $origWidth;

         $retval = array(width => $maxWidth, height => $newHeight);
    }
return $retval;
}

Above function returns an array, obviously. You can work the formula into whatever script you're working on. This has proven to be the right formula for the job. So... up to you whether or not you use it. LATER!

Answer 3

Answer #1 (edited)

After having a look at this and this, you probably need to do something like this:

$img->resize(200, 150, 'outside')->crop("center", "center", 200, 150);

While resizing it will resize the image so that it either fits exactly within the box (box = 200x150) or one of the dimension fits while the other exceeds the box. While cropping, the portion of the image that bleeds outside the box will be trimmed. Specifying the center smart coordinate means the top+bottom or left+right portion will be removed.

Answer #2

If you are having problems in calculating what to crop, try this:

<?php
$target_wide = 200;
$target_tall = 150;

$test_case = array(
    array(1000, 800),
    array(800, 1000),
    array(1000, 750), // perfect fit
    array(750, 1000)
);

foreach($test_case as $test) {
    list(
        $source_wide,
        $source_tall
    ) = $test;
    $source_aspect_ratio = $source_wide / $source_tall;
    $target_aspect_ratio = $target_wide / $target_tall;
    if ($source_aspect_ratio > $target_aspect_ratio)
    {
        $output_tall = $target_tall;
        $output_wide = (int) ($target_tall * $source_aspect_ratio);
    }
    else
    {
        $output_wide = $target_wide;
        $output_tall = (int) ($target_wide / $source_aspect_ratio);
    }
    $output_crop_hori = (int) (($output_wide - $target_wide) / 2);
    $output_crop_vert = (int) (($output_tall - $target_tall) / 2);
    var_dump($source_wide, $source_tall, $output_wide, $output_tall, $output_crop_hori, $output_crop_vert);
    echo PHP_EOL;
}

Output:

int(1000)
int(800)
int(200)
int(160)
int(0)
int(5)

int(800)
int(1000)
int(200)
int(250)
int(0)
int(50)

int(1000)
int(750)
int(200)
int(150)
int(0)
int(0)

int(750)
int(1000)
int(200)
int(266)
int(0)
int(58)

Answer 4

//Following code for keeping aspect ratio

$srcWidth=1000;
$srcHeight=800;

$targetWidth=200;
$targetHeight=150;

$diff=0;
//get difference

if( $srcWidth > $srcHeight ) // 1000 > 800
{
    $diff = $srcWidth - $srcHeight; // 1000 - 800 = 200
    $diff = ($diff / $srcWidth) * 100; // ( 200 / 1000 ) * 100 = 20
}
else
{
    $diff = $srcHeight - $srcWidth;
    $diff = ($diff / $srcHeight)*100;
}

if( $targetWidth > $targetHeight)
{
    $targetHeight = (( $targetHeight * $diff ) / 100) - $targetWidth; // (( 200 * 20 ) /  100) - 200 = 160
}
else
{
    $targetWidth = (( $targetWidth * $diff ) / 100) - $targetHeight;
}

Answer 5

That's how you can calculate size of crop:

$src_width = 1000;
$src_height = 500;
$src_ratio = $src_width/$src_height;

$width = 200;
$height = 150;
$ratio = $width/$height;

$crop_height = 0;
$crop_width = 0;

if ($src_height > $src_width)
{
    $new_height = $width/$src_ratio;
    $crop_height = $new_height-$height;
}
else
{
    $new_width = $height*$src_ratio;
    $crop_width = $new_width-$width;
}

print 'Crop height: '.$crop_height.PHP_EOL
      .'Crop width: '.$crop_width;