How to Use Colors

Before you can actually start drawing geometric shapes all over the place, you need the ability to select and use color. There are eight basic functions for color, as follows:

• ImageColorAllocate(resource image, int red, int green, int blue)

• ImageFill(resource image, int x, int y, int color)

• ImageColorTransparent(resource image, int color)

• ImageTrueColorToPalette(resource image, bool dither, int colors)

• ImageColorsTotal(resource image)

• ImageColorAt(resource image, int x, int y)

• ImageColorsForIndex(resource image, int index)

• ImageColorSet(resource image, int index, int red, int green, int blue)

Each of these functions takes an image resource as its first argument. Now take a more in-depth look at each of these functions to see how you will be able to use them to manipulate the colors on your canvas.

Allocating Colors to an Image

ImageColorAllocate() takes four arguments: an image resource, a value for the amount of red that should be in the color, a value for the amount of green that should be in the color, and a value for the amount of blue that should be in the color. If you have never used RGB (red, green, blue) values before, each element of the color has a range of 0 to 255; 0 being the lowest level and 255 being the highest level. Let’s say you wanted to allocate a color that was completely black. You would write a line of code that looks like the following:

$black = ImageColorAllocate($someImageResource, 0, 0, 0);

What this essentially means is that you will be able to use the variable $black as a color in the specified image resource. If you were working with two images simultaneously, then you would not be able to use the variable $black in both images. You can use only the colors that you allocate to a specific image. If this seems a little confusing, take a look at the following code example and hopefully it will make things a little clearer:

<?php
// Create two images
$image1 = ImageCreate(100, 100);
$image2 = ImageCreate(100, 200);
// Allocate the colors to be used
$black = ImageColorAllocate($image1, 0, 0, 0);
// This is legal to do
ImageRectangle($image1, 6, 6, 66, 42, $black);
// This is illegal to do because black is not allocated to the image
ImageRectangle($image2, 6, 6, 66, 42, $black);
?>

Filling the Image

The ImageFill() function also takes four arguments: an image resource, a starting x point, a starting y point, and the color to fill. ImageFill() does a flood fill of the entire image starting at the specified coordinates. Since this function fills the entire image there is no need to specify any other coordinate besides (0, 0). Take a look at the following example:

<?php
$image = ImageCreate(100, 100);
$red = ImageColorAllocate($image, 255, 0, 0);
ImageFill($image, 0, 0, $red);

// Show our Image
header(“Content-type: image/png”);
ImagePng($image);
ImageDestroy($image);
?>

Take a look at Figure 8.2 to see the results of using the ImageFill() function.

You could have specified any (x, y) coordinate and you would have received the same exact results. Don’t worry too much about the display code right now; it will be covered later in this chapter.

Setting Your Transparent Color

If you are using an image format that supports transparencies, such as .png, you can set the color you want to show up as transparent by using the ImageColorTransparent() function (Figure 8.3). ImageColorTransparent() takes two arguments: the image resource, and the color that you want to make transparent. To allocate a color to be transparent you still use the ImageColorAllocate() function. To understand this better, take a look at the code below. In the following example a red circle is drawn over a dark background and then the color red is made transparent and the same image is drawn again.

<?php
$image = ImageCreate(128, 128);
$black = ImageColorAllocate($image, 0, 0, 0);
$red = ImageColorAllocate($image, 255, 0, 0);
// Make the background black
ImageFill($image, 0, 0, $black);
// Draw the circle
ImageFilledArc($image, 64, 64, 110, 110, 0, 360, $red, IMG_ARC_PIE);

// Show our Image Filled Image
ImagePng($image, “redcircle.png”);

// Make the red transparent
ImageColorTransparent($image, $red);
// Show our Image Transparent Image
ImagePng($image, “transparentcircle.png”);

ImageDestroy($image);
?>
<HTML>
<HEAD>
    <TITLE>Image Test</TITLE>
</HEAD>
<BODY>
<img src=“redcircle.png”>
<img src=“transparentcircle.png”>
</BODY>
</HTML>

How cool is that!? You are quickly becoming a graphic expert in PHP. Again, don’t worry about the display code yet; I promise you will get to it later in this chapter.

Converting a True-Color Image to a Palette Image

Converting an image is not as complicated as it sounds. As a matter of fact, this is very easy using the ImageTrueColorToPalette() function. ImageTrueColorToPalette() takes three arguments, the first of which is the image resource. The second is a Boolean value—if it is set to true, then dithering will be used; otherwise dithering will not be used. The third argument is the number of colors that should appear in the color palette of the new image. You could use this function to convert a .jpeg image into an indexed-color image, but the decline in quality of the image would be very noticeable. The most logical reason to use this function would be if you have a .png image that uses only, say, 16 colors, but it was saved as a true-color image for some odd reason. Take a look at the following example:

<?php
// Get the image that needs to be converted
$image = ImageCreateFromPng(‘truecolorimage.png’);
// Now convert the image, since it is only using 16 colors you only need to specify 16
colors
ImageTrueColorToPalette($image, true, 16);
// save the image
ImagePng($image, ‘convertedimage.png’);
?>

See, you converted an existing image from a true-color image to an indexed-color image and saved it as a new image all in three lines of code. I told you it wasn’t as complicated as it sounded. Do some experimenting with this function on several different images to see the effects. Convert a .jpeg photo using dithering, and then do the same thing without using dithering to see the dramatic differences.

Counting Colors in an Image

To get the total number of colors in an image, you can use ImageColorsTotal(). ImageColorsTotal() takes one argument: the image resource for which you want to count the number of colors.

<?php
// get an Image
$image = ImageCreateFromPng(‘somegraphic.png’);
// now count the colors in this Image   
$totalColors = ImageColorsTotal($image);
echo(“There are “ . $totalColors . ” colors in this image”);
?>

Retrieving a Color at a Point

The ImageColorAt() function takes three arguments: the image resource, an x point, and a y point. ImageColorAt() will return the index of the color at the specified (x, y) pixel. Once you have this index you can use the ImageColorsForIndex() function to retrieve the red, green, and blue components of the specific color.

<?php
$image = ImageCreateFromJpeg(‘someimage.jpg’);
  $colorIndex = ImageColorAt($image, 100, 20);
$colorArray = ImageColorsForIndex($image, $colorIndex);
$red = $colorArray[‘red’];
$green = $colorArray[‘green’];
$blue = $colorArray[‘blue’];

echo(“Red: ” . $red . “<br>Green: ” . $green . “<br>Blue:” . $blue);
?>

The ImageColorsForIndex() function takes two arguments: an image resource and a color index. It then returns an array with the individual red, green, and blue components in each index. Once you have these components you could use the ImageColorAllocate() function to allocate a color for an image, or you could use the ImageColorSet() function to change a color in an image.

The ImageColorSet() function takes five arguments. The first is the image resource that you want to operate on, the second is the index of the color you want to change, the third argument is the red component, the fourth is the green component, and the fifth and final argument is the blue component.