Creating New Images | PHP Essentials, 2nd Edition

With a function called imagecreate() in its repertoire, you might imagine that creating a new image with PHP is just a one-line program. Unfortunately it isn't, but it's not an exceptionally difficult process, either. Building an image is a step-wise process, using a few different functions. If you think about what an image contains-a size, a shape, colors, and so forth-you can deduce that the steps used to programmatically create an image are along those lines.

In this lesson, you'll just create some basic images with different colors and text-nothing too dramatic. Creating an image does begin with the imagecreate() function, but all this function does is set aside a canvas area for your new image. For example, to create an image that is 250 pixels wide by 100 pixels high, use

 $im = imagecreate(250,100);

Having a canvas ready for you is all well and good, but next you have to define your colors and actually do some filling. Colors are defined through the imgcol-orallocate() function using the RGB (red, green, blue) values. For example:

 $black = imagecolorallocate ($im, 0, 0, 0); $white = imagecolorallocate ($im, 255, 255, 255); $red = imagecolorallocate ($im, 255, 0, 0); $green = imagecolorallocate ($im, 0, 255, 0); $blue = imagecolorallocate ($im,  0, 0, 255);

Note

The first allocated color is used as the background color of the image. In this case, the background color will be black.

You now have a palette of five colors you can use on the $im canvas. Next, you can use one or more of the many drawing functions to indicate an area that should then be filled with one of the pre-defined colors.

imagearc() is used to draw a partial ellipse.
imageellipse() is used to draw an ellipse.
imageline() is used to draw a line.
imagepolygon() is used to draw a polygon.
imagerectangle() is used to draw a rectangle.

These functions use x and y coordinates as indicators of where to start drawing on your canvas. To draw a red rectangle on your canvas beginning at the point (0, 0) and going for 20 pixels horizontally and 25 pixels vertically, you would use the imagerectangle() function like so:

 imagerectangle($im, 0, 0, 20, 25, $red);

Next, draw another rectangle of the same size and in white, beginning at the x,y point where the previous rectangle stopped:

 imagerectangle($im, 20, 25, 40, 50, $white);

To output this stream of image data to the screen, you must first send the appropriate header() function, using the mime type of the image being created. Then, use the imagegif(), imagejpeg(), or imagepng() functions as appropriate to output the data stream. For example:

 header ("Content-type: image/jpeg"); imagejpeg ($im);

Finally, use the imagedestroy() function just to clear up the memory used by the imagecreate() function. You should now have a little script that looks something like this:

 <? $im = imagecreate (50, 100); $black = imagecolorallocate ($im, 0, 0, 0); $white = imagecolorallocate ($im, 255, 255, 255); $red = imagecolorallocate ($im, 255, 0, 0); $green = imagecolorallocate ($im, 0, 255, 0); $blue = imagecolorallocate ($im, 0, 0, 255); imagerectangle($im, 0, 0, 20, 25, $red); imagerectangle($im, 20, 25, 40, 50, $white); header ("Content-type: image/jpeg"); imagejpeg ($im); imagedestroy($im); ?>

You're not yet using the other allocated colors in this particular image, but you will be shortly. For now, if you save this script as image1.php and access it with your Web browser, you'll see something like Figure 8.1 (except it'll be in color!).

click to expand
Figure 8.1: Basic rectangles

You may notice that these rectangles are simply outlines. In fact, PHP has image functions called imagefilledarc(), imagefilledellipse(), imagefilledpolygon(), and imagefilledrectangle(), which are used exactly like their non-filled counterparts. The difference is in the output, as you'll see in Figure 8.2. The script resulting in this output uses imagefilledrectangle() in place of imagerectangle().

click to expand
Figure 8.2: Filled rectangles

Pie Chart Example

Granted, the previous examples were somewhat boring, but think of the process that is in place-all the shapes that are created and filled are delineated by numbers, as well as by starting and ending points. You can also use this same sequence of events (define boundaries, fill shapes) to create charts and graphs from sets of data. For example, you can create pie charts, as shown in this code:

 <? $im = imagecreate (100, 100); $white = imagecolorallocate($im, 255, 255, 255); $red = imagecolorallocate($im, 255, 0, 0); $green = imagecolorallocate($im, 0, 255, 0); $blue = imagecolorallocate($im, 0, 0, 255); imagefilledarc ($im, 50, 50, 100, 50, 0, 90, $red, IMG_ARC_PIE); imagefilledarc ($im, 50, 50, 100, 50, 91, 180,  $green, IMG_ARC_PIE); imagefilledarc ($im, 50, 50, 100, 50, 181, 360,  $blue, IMG_ARC_PIE); header ("Content-type: image/jpg"); imagejpg ($im); imagedestroy($im); ?>

With the exception of the imagefilledarc() function calls, this should look very familiar to you. Looking closely at the imagefilledarc() function, you can see that it takes several arguments:

Image identifier
Partial ellipse centered at x
Partial ellipse centered at y
Partial ellipse width
Partial ellipse height
Partial ellipse start point
Partial ellipse end point
Color
Style

Check out the following code:

 imagefilledarc ($im, 50, 50, 100, 50, 181, 360, $blue, IMG_ARC_PIE);

This code says to begin the arc at point (50,50) and give it a width of 100 and a height of 50. The start point (think of degrees) is 181 and the end is 360. The arc should be filled with the defined color $blue and use the IMG_ARC_PIE style. IMG_ARC_PIE is one of several built-in styles that are used in the display; this one says to create a rounded edge.

All of this code produces the example you see in Figure 8.3.

click to expand
Figure 8.3: Basic pie chart

Now, to get really tricky and give the pie a 3D appearance, define three more colors (for the edge), which can be either lighter or darker, as long as they contrast. For example:

 $lt_red = imagecolorallocate($im, 255, 100, 100); $lt_green = imagecolorallocate($im, 100, 255, 100); $lt_blue = imagecolorallocate($im, 100, 100, 255);

Next, add a for loop, which makes a bunch of little arcs at the points (50,60) to (50,51), using the lighter colors as fill colors.

 for ($i = 60;$i > 50;$i--) {          imagefilledarc ($im, 50, $i, 100, 50, 0, 90, $lt_red, IMG_ARC_PIE);          imagefilledarc ($im, 50, $i, 100, 50, 91, 180, $lt_green, IMG_ARC_PIE);          imagefilledarc ($im, 50, $i, 100, 50, 181, 360, $lt_blue, IMG_ARC_PIE); }

Your new code might look like this:

 <? $im = imagecreate (100, 100); $white = imagecolorallocate($im, 255, 255, 255); $red = imagecolorallocate($im, 255, 0, 0); $green = imagecolorallocate($im, 0, 255, 0); $blue = imagecolorallocate($im, 0, 0, 255); $lt_red = imagecolorallocate($im, 255, 100, 100); $lt_green = imagecolorallocate($im, 100, 255, 100); $lt_blue = imagecolorallocate($im, 100, 100, 255); for ($i = 60;$i > 50;$i--)   {          imagefilledarc ($im, 50, $i, 100, 50, 0, 90, $lt_red, IMG_ARC_PIE);          imagefilledarc ($im, 50, $i, 100, 50, 91, 180, $lt_green, IMG_ARC_PIE);          imagefilledarc ($im, 50, $i, 100, 50, 181, 360, $lt_blue, IMG_ARC_PIE); } imagefilledarc ($im, 50, 50, 100, 50, 0, 90, $red, IMG_ARC_PIE); imagefilledarc ($im, 50, 50, 100, 50, 91, 180, $green, IMG_ARC_PIE); imagefilledarc ($im, 50, 50, 100, 50, 181, 360, $blue, IMG_ARC_PIE); header ("Content-type: image/jpg"); imagejpg ($im); imagedestroy($im); ?>

Save this file and place it on your Web server, and then load the file in your browser. Figure 8.4 shows the output of this script, and you can see the 3D effect in the image.

click to expand
Figure 8.4: A 3D pie chart

These examples are just very basic examples that show the power of the image drawing and filling functions. In the next section, you'll learn how to slice and dice existing images.