Backup of the original page by Frank Boumphrey:

www.hypermedic.com/php/index.htm

Please consult the original if still available.

Elementary Graphics

[Index]

PHP allows us to Manipulate Graphics 'on-the-fly' It can handle two graphics formats, JPEG, and PNG. Early versions of PHP also supported Gif, but these graphics are copyrighted by Unisys, and they started making noises about charging web users. Obviously for a language that was open, this was unacceptable. Not to worry though, the PNG format does just about everything that the Gif format does, and in most cases does it better. All modern browsers support PNG graphics.

Introduction

In order to draw a picture in PHP we have to do the following.

Creating a Canvas

When we create a canvas, we are in fact setting aside memory in the computer that we can use to draw on. To do this we use the ImageCreate([int],[int]) function which takes two arguments which represent the width and the height of file of the canvas we will be using. It returns a resource integer, which we then use as a handle to refer to all operations we carry out on the canvas.

    $Image=ImageCreate(400,200);

The above code has created a canvas in memory 400 Pixels wide, and 200 Pixels high.

Outputting Graphics

We will go into all the details of drawing (or rather we will cover some of them), but assuming that you have drawn something, you will either want to output it to a browser, or you will want to save it to disc. This is done using either the ImagePNG(), function, or the ImageJPEG() function. These functions both take a required and an optional parameter. The required parameter is image handle, and the optional parameter is a file path where we will store the file.

Writing to the browser

The syntax is quite simple:

   $Image=ImageCreate(400,200);
     //...draw on the canvas
   ImagePNG($Image);  //outputs the image to the browser.

Writing to File

Simply add the full path name of the destination. Add as many destinations as you want.

    $Image=ImageCreate(400,200);
      //...draw on the canvas
    ImagePNG($Image,"graphic6.png");  //writes image to same folder as program
    ImagePNG($Image,"c:/courses/php/graphic6.png");  //writes the image to this address.

Note that the function does either one or the other, if we want to both write out the file, and stored it to disc we must call the function twice.

Destroying a Canvas

All operations with Graphics tend to be memory intensive. Therefore it is vital that we free up memory after finishing drawing by destroying our canvas. We use the ImageDestroy([image handle]) function which takes as an argument the image handle to do this.

     ImageDestroy($Image);

The canvas we created in the last section is now destroyed

Drawing

Now we've seen how to create and destroy our canvas, let's find out how to draw on it.

Coordinates

Whenever we refer to our canvas we will use x, and y coordinates. The top left corner of the canvas is 0, 0. The bottom right (of the canvas we created in the first section) is 400,200. All measurements are in Pixels.

Colors

In order to use a color we have to create a color using the ImageColorAllocate([int red],[int green],[int blue]) function and pass it to a color handle. The function takes three integers between 0 and 256 as parameters. These represent the amount of red, green, and blue coloring respectively.

    $[color handle]=ImageColorAllocate([int red],[int green],[int blue])
For those not familiar with this concept, all colors are made by mixing the three primary colors, red, green, and blue. What you are doing in CSS or HTML when you assign a color (e.g. bright yellow #ffff00) is using hexadecimal numbers between 0 and 250. In PHP we use decimal numbers separated by a commas to do the same thing.

The following code will create a bright yellow color which we pass to a handle we choose to call canary

     $canary=ImageColorAllocate(255,255,0)

Lines

We draw a line on our canvas using the ImageLine($[Image handle],[x1],[y1],[x2],[y2],[color handle]); function.

Let's leap right in a draw a line! Type up the following in your favorite editor. The code will draw a red line on a green background, 10 pixels wide diagonally across the canvas.

Example 1

 <?
  1 header("content-type:image/png");
  2 $Image=ImageCreate(400,200);
  3 $green=ImageColorAllocate($Image,0,255,0);
  4 $red=ImageColorAllocate($Image,255,0,0);
  5 imagesetthickness($Image,5);
  6 Imageline($Image,10,10,200,150,$red);
  7 ImagePNG($Image);
  8 ImageDestroy($Image);
 ?>

What's Going on

Here is the graphic we have just created.

Graphic created by above code

Circles and Ellipses

To draw circles and ellipses use the ImageArc($[Image handle],[x1],[y1],[width],[height], [start],[finish],[color handle]) function. The following graphic shows how to interpret these parameters. Note especially that x and y is the center point of the ellipse.

Parameters taken by imagearc() function

If we set start to 0 and end to 360, a complete eclipse will be drawn, other wise only an arc will be drawn. If we set the height and the width to the same values a circle will be drawn.

In the following example we add several circles to our graphic, and flood-fill them.

Example 2

<?
 1 header("content-type:image/png");
 2 $Image=ImageCreate(400,200);
 3 $green=ImageColorAllocate($Image,0,255,0);
 4 $red=ImageColorAllocate($Image,255,0,0);
 5 $yellow=ImageColorAllocate($Image,255,255,0);
 6 $black=ImageColorAllocate($Image,0,0,0);
 7 $blue=ImageColorAllocate($Image,0,0,255);

 8 imagesetthickness($Image,5);
 9 ImageArc($Image,200,100,180,180,0,360,$black);
 10 ImageArc($Image,160,80,25,25,0,360,$black);
 11 ImageArc($Image,240,80,25,25,0,360,$black);
 12 imagefill ($Image, 200, 100, $yellow);
 13 imagefill ($Image, 160, 80, $blue);
 14 imagefill ($Image, 240, 80, $blue);
 15 imagesetthickness($Image,10);
 16 ImageArc($Image,200,100,120,130,45,135,$red);
 17 Imageline($Image,0,0,400,200,$red);
 18 ImagePNG($Image);
 19 //ImagePNG($Image,"graphic2.png");

 20 ImageDestroy($Image);
?>

What's Going on

We will just go over the new code.