Black and White in GD

One of the more effective methods of image manipulation is to convert a colour image to a black and white, or greyscale, picture. Black and white images can convey emotion and drama brilliantly, so they're great for using in certain styles of websites. Wouldn't it be great to be able to convert an uploaded image to greyscale automatically using PHP?

Converting an image into a different colour space is quite a simple process. As with many image processing scripts we need to open the image to be converted to start off with. We also need to open a blank GD image resource with the same dimensions as the opened image so that we have somewhere to draw to.


<?php

$source = imagecreatefromjpeg($file);

$image = imagecreate(imagesx($source),imagesy($source));

?>

We have used the imagecreate() function to create the blank image in this example rather than imagecreatetruecolour(). In creating a black and white image we will only require 256 colours in the destination image, not 16.7million as in a true colour image.

The next stage of the process is to allocate a colour palette. As we need a range of 256 colours its best to create a loop that iterates 256 times creating a colour with each iteration. These colours will be placed into an array for easy access later.


<?php

for ($i=0;$i<256;$i++) {

$palette[$i] = imagecolorallocate($image,$i,$i,$i);

}

?>

Obviously this loop with produce a palette of colours from black through to white. You don't have to stick with standard greys though, it would be simple to produce a range of any colours.

The next part of the process is to scan through the pixels of the source image one by one and convert them to a greyscale colour, and write that colour to the destination image. This is done by scanning the rows pixel by pixel and using some standard colour extraction code.


<?php

for ($y=1;$y<imagesy($source);$y++) {

for ($x=1;$x<imagesx($source);$x++) {

$rgb = imagecolorat($source,$x-1,$y-1);

$r = ($rgb >> 16) & 0xFF;

$g = ($rgb >> 8) & 0xFF;

$b = $rgb & 0xFF;

//Convert to greyscale

$g = greyscale($r,$g,$b);

imagesetpixel($image,$x,$y,$palette[$g]);

}

}

?>

The code that we need to concern ourselves with is that greyscale() function that takes the $r, $g, and $b values, does something to them, and returns a value between 0 and 255 that corresponds to the level of grey the pixel should be set to in the destination image.

The simplest form of greyscale() function is to pick one of the RGB values and just return it. This will extract the red, green or blue channel from the source image and output a greyscale image based upon it.


<?php

function greyscale($r,$g,$b) { return $b; }

?>

In this example we're returning the value of the blue channel. While this method of building a greyscale image does work, it is not ideal. Images are made up of all three channels, and using just one will almost always result in large amounts of detail being lost.

Move to page: 1 2

Comments

Comments are not currently being accepted for this article.

Sidebar

Published:

30/01/2007

Views:

2339

Author:

Chris Neale

Labels:

gd, image, php

Print:

View print version

Sidebar:

PHP image function reference