Image re-size and crop question

[crwork]

I'm creating a user avatar image from a user-uploaded photo. The avatar is required to be 24x24. The uploaded photo has typical dimensions in that the width is going to be greater than the height.

 

This code works as far as re-sizing the original to a 24x24 avatar. The problem is that the image is noticeably distorted. What I'd like to be able to do is figure out a way to crop the original image so that both height and width dimensions are the same, then re-size down to a lower image so that the image isn't distorted:

 

$im = imagecreatefromstring($imgDecoded);

// Get width and height of original image resource
$origWidth = imagesx($im);
$origHeight = imagesy($im);

// Create new destination image resource for new 24 x 24 image
$imNew = imagecreatetruecolor(24, 24);

// Re-sample image to smaller size
// resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
imagecopyresampled($imNew, $im, 0, 0, 0, 0, 24, 24, $origWidth, $origHeight);
imagepng($imNew);
imagedestroy($im);
imagedestroy($imNew);

 

Could someone point me in the right direction with regard to a good way to crop the original image before it gets resized? Thanks!

[Jessica]

Basic logic - which is greater, height or width? Instead of using the original height and width in your resampled call, use the original of whichever is smaller, then that same measurement for the other.

Ie, if an image is 150x200 you want to only sample 150x150, right?

[crwork]

Basic logic - which is greater, height or width? Instead of using the original height and width in your resampled call, use the original of whichever is smaller, then that same measurement for the other.

Ie, if an image is 150x200 you want to only sample 150x150, right?

 

Yes, if the original were 150x200 I'd want 150x150. If I wanted to crop evenly on both the left and right, I guess I'd just need to do some math and change the parms on the imagecopyresampled command?

[Jessica]

That is what I said.

[Tychonaut]

Depending on the situation and how comfortable you are with jQuery there is an interesting JQ/PHP package called "imageAreaSelect" which allows the user to "draw out" a square on their original photo as they upload it. jQuery updates hidden fields on the photo upload form with the coordinates of this selected area, and then this is passed back to PHP when the form is submitted. These coordinates are then used in the cropping and resizing process. You just assign the final thumbnail size and "selection aspect ratio" as constants. (ie a square is 1:1)

 

Essentially they are selecting out their own thumbnail when they upload their photo. It gets around the "how do I crop an image that will accommodate all different photo compositions?" problem.

 

It's not too hard to implement. Even if you don't use it, the code is worth taking a look at.