1

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 (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.

Community
  • 1
  • 1
James Simpson
  • 13,488
  • 26
  • 83
  • 108

3 Answers3

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().

jeroen
  • 91,079
  • 21
  • 114
  • 132
  • Well I figure that can be the last step, but I need to crop off the empty space and then do the resize. Not sure how I go about doing that. – James Simpson Sep 10 '09 at 01:07
  • It's hard to say without seeing your images, but I would try to crop to a standard size because if you want to crop differently depending on the contents of your image, you'll have a lot more work and the faces of your different avatars will have different sizes. – jeroen Sep 10 '09 at 01:17
1

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!

Artelius
  • 48,337
  • 13
  • 89
  • 105
0

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

Mike Buckbee
  • 6,793
  • 2
  • 33
  • 36
  • How do I go about cropping it automatically though? The different combinations would have different heights & widths. – James Simpson Sep 10 '09 at 01:06
  • Edited answer to reflect need for differing initial face sizes (beards) – Mike Buckbee Sep 10 '09 at 01:13
  • Okay I see what you are saying, and this technically works. However, if the combined images aren't of that max size, the final avatar image will be smaller than it should be. – James Simpson Sep 10 '09 at 01:19
  • In the first step I was saying to keep track of the size so that you might have a face image that is 90 x 90 so you use "90" as the crop size in step 3, or the face image is 120 x 120 b/c of a beard so you use "120" as the crop size in step 3 instead. – Mike Buckbee Sep 10 '09 at 01:23