Web diary

A while ago, I was working on this site Student Travel, and I ran into a problem - I had to upload images to the server and process them, by adding a nice oval frame around them. I had to think of a method to get that done, here are the results.

Original	Result

Let's get started...

The site is based on Drupal, so the tutorial is adjusted to this CMS; however, the method can be adapted to any other system, with minor changes.

Note that the article assumes that you are familiar with Drupal, so I won't describe the process of setting up and configuring the modules.

The following modules are needed: ImageCache, ImageCache Actions. Once they are set up, you have to enable the following modules in the ImageCache group:

1. ImageCache
2. ImageCache UI
3. ImageAPI
4. ImageAPI GD2
5. Imagecache Canvas Actions
6. Imagecache Color Actions
7. Imagecache Custom Actions

Go to Dashboard » Site building » ImageCache, and add a new template: custom-image.

The first step is to resize the image. In this example, the size of the resulting image must be 200×200 pixels.

Step #1: add a Deprecated Scale, with these settings:

1. Width - 200;
2. Height - 200;
3. Scale to fit - Outside dimensions. If you choose Inside dimensions, the width or the height of the image will be less than 200 pixels, which is not what we need.

Scale to fit = Outside dimensions Result: 200×232	Scale to fit = Inside dimensions Result: 172×200 pixels

Since the image is not yet 200×200 pixels, we have to crop it.

Step #2: Crop, with the following settings:

1. Width - 200;
2. Height - 200;
3. X offset - center;
4. Y offset - center.

The first two settings indicate the size of the output image, while the X and Y offset indicate which part of the image will be cropped. In this example, cropping is done from the center; based on the assumption that the most important part of the picture will be in its center.

X offset = center, Y offset = center Result: the center of the image is visible	X offset = center, Y offset = top Result: the top part of the image is visible

The next step is more complex, we'll apply a mask, to remove some parts of the image.

PHP does not offer a function that can do that for us, so this code relies on an example discussed in the comments of PHP's imagesavealpha, the method was devised by Tobias.

Step #3: Custom action, Tobias' function:

Enter this in the Code field:

// Copy the image
$picture = $image->resource;

// Load the mask
$mask = imagecreatefrompng('./images/custom-image-mask.png');

// Get the image size and create a new image of the same size
$xSize = imagesx($picture);
$ySize = imagesy($picture);
$newPicture = imagecreatetruecolor($xSize, $ySize);
imagesavealpha($newPicture, true);
imagefill($newPicture, 0, 0, imagecolorallocatealpha($newPicture, 0, 0, 0, 127));

// Apply the mask
for ($x = 0; $x < $xSize; $x++) {
    for ($y = 0; $y < $ySize; $y++) {
        $alpha = imagecolorsforindex($mask, imagecolorat($mask, $x, $y));
        $alpha = 127 - floor($alpha['red'] / 2);
        $color = imagecolorsforindex($picture, imagecolorat($picture, $x, $y));
        imagesetpixel($newPicture, $x, $y, imagecolorallocatealpha($newPicture, $color['red'], $color['green'], $color['blue'], $alpha));
    }
}

// Update the image, remove the copy
imagedestroy($picture);
$image->resource = $newPicture;
return $image;

Result	The mask

As you can see, the black parts of the mask are not seen in the final image. This is exactly what we were looking for, but we have add a nice frame to this.

Step #4: Overlay (watermark), use these settings:

1. X offset - 0;
2. Y offset - 0;
3. opacity - 100;
4. file name - path to the file that contains the frame (it has to be a PNG with transparency).

Result	The frame

We're not done yet.

Step #5: Change File format, our PNG file looks nice only if it is transparent:

It is likely that the uploaded images will be in formats such as JPG, GIF or TIFF (which either don't support transparency at all, or don't have alpha-transparency). This is why we have to specify that the output.

Set File format to PNG.

Result in PNG	Result in JPG (notice the ugly white frame)

Ta-da!

I hope you'll find this helpful.