Drawing a New Image

The basic PHP function used to create a new image is called ImageCreate(), but creating an image is not as simple as just calling the function. Creating an image is a stepwise process and includes the use of several different PHP functions.

Creating an image begins with the ImageCreate() function, but all this function does is set aside a canvas area for your new image. The following line creates a drawing area that is 150 pixels wide by 150 pixels high:

$myImage = ImageCreate(150,150);

With a canvas now defined, you should next define a few colors for use in that new image. The following examples define five such colors, using the ImageColorAllocate() function and RGB values:

$black = ImageColorAllocate($myImage, 0, 0, 0);
$white = ImageColorAllocate($myImage, 255, 255, 255);
$red = ImageColorAllocate($myImage, 255, 0, 0);
$green = ImageColorAllocate($myImage, 0, 255, 0);
$blue = ImageColorAllocate($myImage, 0, 0, 255);

Now that you know the basics of setting up your drawing canvas and allocated colors, you can move on to learning to draw shapes and actually output the image to a Web browser.

Drawing Shapes and Lines

Several PHP functions can assist you in drawing shapes and lines on your canvas:

• ImageEllipse() is used to draw an ellipse.

• ImageArc() is used to draw a partial ellipse.

• ImagePolygon() is used to draw a polygon.

• ImageRectangle() is used to draw a rectangle.

• ImageLine() is used to draw a line.

Using these functions requires a bit of thinking ahead because you must set up the points where you want to start and stop the drawing that occurs. Each of these functions uses x-axis and y-axis coordinates as indicators of where to start drawing on the canvas. You must also define how far along the x-axis and y-axis you want the drawing to occur.

For example, the following line will draw a rectangle on the canvas beginning at point (15,15) and continuing on for 25 pixels horizontally and 40 pixels vertically, so that the lines end at point (40,55). Additionally, the lines will be drawn with the color red, which has already been defined in the variable $red.

ImageRectangle($myImage, 15, 15, 40, 55, $red);

If you want to draw another rectangle of the same size but with white lines, beginning at the point where the previous rectangle stopped, you would use this code:

ImageRectangle($myImage, 40, 55, 65, 95, $white);

Listing 14.1 shows the image-creation script so far, with a few more lines added to output the image to the Web browser.

Listing 14.1. Creating a New Image

1:  <?
2:  //create the canvas
3:  $myImage = ImageCreate(150,150);
4:
5:  //set up some colors
6:  $black = ImageColorAllocate($myImage, 0, 0, 0);
7:  $white = ImageColorAllocate($myImage, 255, 255, 255);
8:  $red = ImageColorAllocate($myImage, 255, 0, 0);
9:  $green = ImageColorAllocate($myImage, 0, 255, 0);
10: $blue = ImageColorAllocate($myImage, 0, 0, 255);
11:
12: //draw some rectangles
13: ImageRectangle($myImage, 15, 15, 40, 55, $red);
14: ImageRectangle($myImage, 40, 55, 65, 95, $white);
15:
16: //output the image to the browser
17: header ("Content-type: image/png");
18: ImagePng($myImage);
19:
20: //clean up after yourself
21: ImageDestroy($myImage);
21: ?>

Lines 1718 output the stream of image data to the Web browser by first sending the appropriate header() function, using the MIME type of the image being created. Then you use the ImageGif(), ImageJpeg(), or ImagePng() functions as appropriate to output the data stream; this example outputs a PNG file. In line 21, we use the ImageDestroy() function to clear up the memory used by the ImageCreate() function at the beginning of the script.

Save this listing as imagecreate.php, and place it in the document root of your Web server. When accessed, it should look something like Figure 14.1, only in color.

Using a Color Fill

The output of Listing 14.1 produced only outlines of rectangles. PHP has image functions designed to fill areas as well:

• ImageFilledEllipse() is used to fill an ellipse.

• ImageFilledArc() is used to fill a partial ellipse.

• ImageFilledPolygon() is used to fill a polygon.

• ImageFilledRectangle() is used to fill a rectangle.

These functions are used just like their nonfill counterparts. In Listing 14.2, the nonfill functions are replaced with functions designed to fill an area. In other words, only lines 13 and 14 have changed:

Listing 14.2. Creating a New Image with Color Fills

1:  <?
2:  //create the canvas
3:  $myImage = ImageCreate(150,150);
4:
5:  //set up some colors
6:  $black = ImageColorAllocate($myImage, 0, 0, 0);
7:  $white = ImageColorAllocate($myImage, 255, 255, 255);
8:  $red = ImageColorAllocate($myImage, 255, 0, 0);
9:  $green = ImageColorAllocate($myImage, 0, 255, 0);
10: $blue = ImageColorAllocate($myImage, 0, 0, 255);
11:
12: //draw some rectangles
13: ImageFilledRectangle($myImage, 15, 15, 40, 55, $red);
14: ImageFilledRectangle($myImage, 40, 55, 65, 95, $white);
15:
16: //output the image to the browser
17: header ("Content-type: image/png");
18: ImagePng($myImage);
19:
20: //clean up after yourself
21: ImageDestroy($myImage);
21: ?>

Save this listing as imagecreatefill.php, and place it in the document root of your Web server. When accessed, it should look something like Figure 14.2, but again, in color.