Image color transformation

This tutorial will show you some basic image color transformation methods, one to make a grayscale image and one to invert the colors. The code is done in PHP with the GD library, so it's easy to try it yourself. Please realize that this is not the fastest way to make these transformations and that it's not a very good idea to use PHP as an direct output to your site's visitors.

The normal image

I've got a nice photograph of a flower, so lets use that as our normal image. Its 200x150 pixels, so php shouldn't encounter any problems. If you want to use larger images then make sure you alter the memory limit, something which should be easy to fix with htaccess.

We will be using PHP throughout the tutorial, so lets start with the basics. We need to load the (jpg) image first so we can change things, then output it to the screen. Note that the output page is a single image, so no text or html can be added. If you wan't to use the transformed image in a page then load it with a seperate page or save it on the server.

<?php
header("Content-Type: image/jpeg");

$image = imagecreatefromjpeg("flower_normal.jpg");
imagejpeg($image);
?>

This piece of code sets the header to image/jpg, so the browser knows that an image is coming. Then the image flower_normal.jpg is loaded into $image, and $image is send to the browser. This should be pretty easy to understand.

Invert colors

Raster images are made up of lots of dots called pixels. Every dot has got a color, which is a combination of red green and blue. The red, green and blue can have a value between 0 and 255. If we want to invert the colors of the image then we only have to get the red, green and blue value from each pixel and subtract it from 255. The description is a bit f*cked up, but you'll see what i mean in the code:

<?php
header("Content-Type: image/jpeg");

$image = imagecreatefromjpeg("flower_normal.jpg");
$image_width = imagesx($image);
$image_height = imagesy($image);

for ($h = 0; $h < $image_height; $h++) {
    for ($w = 0; $w < $image_width; $w++) {
        $colors = imagecolorsforindex($image, imagecolorat($image, $w, $h));
        $colors['red'] = 255 - $colors['red'];
        $colors['green'] = 255 - $colors['green'];
        $colors['blue'] = 255 - $colors['blue'];
        $new_color = imagecolorallocate($image, $colors['red'], $colors['green'], $colors['blue']);
        imagesetpixel($image, $w, $h, $new_color);
    }
}

imagejpeg($image, NULL, 80);
?>

This piece of code is a bit more complex than the previous example, so i'll explain it bit by bit. If you don't get it than take a look at php.net for a function reference.

First up is the image width and height, we use the imagesx() and imagesy() functions for this job. Then we get to the important part, we use two for loops to get at every pixel of the image, the current x and y are stored in $w and $h. We then get the color at the current xy position using the imagecolorat() function, we then use the same line of code to place the seperate red, green and blue values in an array. After that we set the colors of the previously obtained array by the simple calculation of 255 minus the original value. And finally we use imagecolorallocate() to create the color from the red, green and blue and use the imagesetpixel() function to set the new color of the pixel. The output is the image on the right side of this text.You can change the image by altering the url in the imagecreatefromjpeg() function, and also the image quality by changing the third argument of the imagejpeg() function.

Grayscale

This is off course a very simple way to mess around with image coloring, so i'll show another example in which we will be changing the image to grayscale. The idea is that if the values of red, green and blue are the same, the color will be grayish. Something like (255, 255, 255) resembles white and (0, 0, 0) black. If we want set our image to grayscale then we only have to add the values of red green and blue together and divide this by three. The code will then look like this:

<?php
header("Content-Type: image/jpeg");

$image = imagecreatefromjpeg("flower_normal.jpg");
$image_width = imagesx($image);
$image_height = imagesy($image);

for ($h = 0; $h < $image_height; $h++) {
    for ($w = 0; $w < $image_width; $w++) {
        $colors = imagecolorsforindex($image, imagecolorat($image, $w, $h));
        $grayed_color = ($colors['red'] + $colors['green'] + $colors['blue']) / 3;
        $new_color = imagecolorallocate($image, $grayed_color, $grayed_color, $grayed_color);
        imagesetpixel($image, $w, $h, $new_color);
    }
}

imagejpeg($image, NULL, 80);
?>

This example takes the color for each pixel again, then calculates the average value. This value is then transformed into the color format using the imagecolorallocate() function. The output will be something similar to the image on the right side of this text.

This is obviously a lot of fun, but in some other tutorials i will also show some efficient ways of using these kind of tricks in a website, and also some more transformations like color balance, brightness and contrast.

Thanks for reading this tutorial!