Special effects using imagefilter()

bool imagefilter ( resource image, int filter_type [, int parameter1 [, int parameter2 [, int parameter3]]])

The filters described here were written for the PHP-bundled build of GD, and may not be available in other releases.

This is quite an odd function, as it happens, because the number of arguments you need to pass to it vary depending on the effect. The best way to explain this function is simply to explain briefly how it works then show a code example, so let's get started straight away. No matter what, the function returns true if the filter was applied successfully and false otherwise.

First up is IMG_FILTER_BRIGHTNESS, which takes a number between -255 and 255 that represents how much you want to brighten or darken the image. Setting it to 0 leaves the picture unchanged, 255 sets it to full white (brightest), and -255 sets it to full black (darkest). Most pictures tend to get almost invisible beyond +200 or -200.

This code example will lighten our space picture just a little:

<?php
  $image
= imagecreatefrompng("space.png");
  
imagefilter($image, IMG_FILTER_BRIGHTNESS, 50);
  
header("content-type: image/png");
  
imagepng($image);
  
imagedestroy($image);
?>

Next up is IMG_FILTER_COLORIZE, which takes three parameters between -255 and 255 that respectively represent the red, green, and blue values you want to add or subtract from the image. Setting the blue value to -255 will take all the blue out of all the pixels in the image, whereas setting the red to 128 will add red to them. Setting all three of them to 128 will have the effect of adding white to the picture, brightening it in the same way as IMG_FILTER_BRIGHTNESS.

This code example will make our image look more magenta:

<?php
  $image
= imagecreatefrompng("space.png");
  
imagefilter($image, IMG_FILTER_COLORIZE, 100, 0, 100);
  
header("content-type: image/png");
  
imagepng($image);
  
imagedestroy($image);
?>

Moving on, the IMG_FILTER_CONTRAST filter allows you to change the contrast of the image, and takes just one parameter for a contrast value between -255 and 255. Lower values increase the contrast of the picture, essentially reducing the number of colours so that they are more separate and obvious to the eye. Using positive values brings the colours closer together by mixing them with grey, until at 255 you have a full-grey picture.

This code example shows how even a small positive number makes quite a difference to the resulting image:

<?php
  $image
= imagecreatefrompng("space.png");
  
imagefilter($image, IMG_FILTER_CONTRAST, 20);
  
header("content-type: image/png");
  
imagepng($image);
  
imagedestroy($image);
?>

The IMG_FILTER_EDGEDETECT and IMG_FILTER_EMBOSS filters make all the edges in your picture stand out as if they were embossed, and sets everything else to grey. No parameters are needed for either of them, so using them is quite easy:

This next script uses edge detection to grab the edges first, then embosses those to make the effect more obvious:

<?php
  $image
= imagecreatefrompng("space.png");
  
imagefilter($image, IMG_FILTER_EDGEDETECT);
  
imagefilter($image, IMG_FILTER_EMBOSS);
  
header("content-type: image/png");
  
imagepng($image);
  
imagedestroy($image);
?>

If you want to blur an image you have a choice of two filters: IMG_FILTER_GAUSSIAN_BLUR and IMG_FILTER_SELECTIVE_BLUR. The latter is a generic blur function, but the former is a classic "out-of-focus lens" technique that often actually enhances images. Both require no parameters.

Although they're easy to use, there's no harm showing an example - here's both of them in action. Just comment out the one you don't want to see:

<?php
  $image
= imagecreatefrompng("space.png");
  
imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
  
imagefilter($image, IMG_FILTER_SELECTIVE_BLUR);
  
header("content-type: image/png");
  
imagepng($image);
  
imagedestroy($image);
?>

There's a similar filter, IMG_FILTER_SMOOTH, which gives you a little more control over the output. It takes one parameter, but it takes a little explanation! Unlike the other parameters so far, this isn't a value pertaining to how much you'd like to smooth the image. Instead, it's a /weighting/ for an image manipulation matrix and small changes can affect the output massively.

There isn't enough room here to go into a full discussion of what these manipulation matrices are, but suffice to say you can represent many different transformations - from Gaussian blur to edge detection - using a 3x3 numerical matrix that defines how the colours of the eight pixels surrounding any given pixel (with the pixel itself being the ninth) should have their RGB values changed. With IMG_FILTER_SMOOTH, the parameter you pass is used as the change value for the pixel itself, which means you get to define how much the pixel's own colour is used to form its final color.

You're not likely to want values outside of the range -8 to 8, as even one number makes quite a big difference. At about 10 the picture is almost normal because the original pixel values are given more weight than the combined sum of its neighbours, but you can get some really neat effects between -6 to -8 - do play around and see what you can come up with.

This code example smooths the picture just a little:

<?php
  $image
= imagecreatefrompng("space.png");
  
imagefilter($image, IMG_FILTER_SMOOTH, 6);
  
header("content-type: image/png");
  
imagepng($image);
  
imagedestroy($image);
?>

There are two helpful filters that alter the colours in a simple way, which are IMG_FILTER_GRAYSCALE and IMG_FILTER_NEGATE. Both take no parameters: the first sets the picture to greyscale, and the second sets it to use negative colours.

This code example changes the picture to grayscale then flips it to negative colours:

<?php
  $image
= imagecreatefrompng("space.png");
  
imagefilter($image, IMG_FILTER_GRAYSCALE);
  
imagefilter($image, IMG_FILTER_NEGATE);
  
header("content-type: image/png");
  
imagepng($image);
  
imagedestroy($image);
?>

 

Next chapter: Introduction to special effects using simple algorithms >>

Previous chapter: Updating the drawing script

Jump to:

 

Home: Table of Contents

Follow us on Identi.ca or Twitter

Username:   Password:
Create Account | About TuxRadar