Automatically align and resize 3 images into a small image with PHP?

Question

I don't know if this is even possible with PHP, but I figured if it is, someone here will know how. I'm currently working on a project where users can customize a full body main avatar to be used throughout the site. There are a bunch of different face, hair, etc transparent png images that can be selected to make their custom avatar. I have this working great, but here is the hard part. I want to be able to use the face, hair, and beard (if male), and automatically create an 80x80 image that will be used as their small avatar for forum posts, etc.

There are a few obstacles with this. First, all of the images are 187x404 (big amounts of the image are transparent, the character body image is achieved by stacking the images, so a face image isn't actually that big). For this to work, the images would effectively have to be automatically cropped so that all of the extra space was removed and the actual face, hair, or beard part showed in the 80x80 spot.

The second issue is that some of the hair or beards (when placed on the full-size face image) would extend past the 80x80 and be chopped off. So the image would have to be pieced together at full size, and then resized to fit in 80x80.

I know the basic way of combining the 3 images into one (http://stackoverflow.com/questions/1397377/combine-2-3-transparent-png-images-on-top-of-each-other-with-php), but that is as far as I've gotten. If I'm crazy and this isn't possible then tell me. I'm probably way overcomplicating this, so if you see and obviously easier way to achieving this, I would love to hear it.

Answer 1

I may be oversimplifying this, but can you try:

1. Keep track of max face size dimensions pre-compositing.

2. Output the composite image to a temporary file.

3. Crop square of largest values from step 1

4. Resize cropped image portion to 80 x 80

Answer 2

I think you need to decide first, cropping, resizing or a combination of both (cropping to a bigger square and resizing that).

Anyway, if you already have the images combined into one, all three options are easy to do in php. Take a look at imagecopyresampled().

Answer 3

The easiest way is just to always fit the face/hair/beard in the same area of the image. Then just crop that area out.

If you must, you can store extra data for each image specifying a rectangle in the image that must be visible in the small avatar. Then take the maximum extremities of these rectangles in all the images you compose, and crop+shrink that down to your small avatar size.

However, be aware that resizing PNG images by a few pixels (e.g. 83x83 -> 80x80) can substantially reduce the quality, particularly for images with lots of defined edges. This is because there are many pixels in the new image that are [nearly] evenly split between 4 pixels from the original image, and in images with sharp edges this leads to blurring.

So, shrinking an image to fit a portrait is not just difficult but also reduces quality. I'd cut off the beard instead!