An Introduction to the GD Library Tutorial Author - Scrowler (http://forums.biorust.com/member.php?userid=66)

Are you getting bored with standard PHP functions?  Do you want to venture into additional libraries of PHP code? If so, GD is an additional module that allows the programmer to develop graphics using PHP. Cool huh? You can do things from drawing lines, to adjusting contrast, to anti-aliasing.

Before we start we need to make sure that your web server has GD enabled. To do this, make a new file called phpinfo.php with the following string as its only content:

<? phpinfo() ?>

This will output a big list of PHP settings, which is probably not very user friendly. You are looking for a specific section - it will look something like the following if GD is enabled on your server:

This is an example of the output of phpinfo() for a bundled GD distribution, which is the common one, as it comes with newer versions of PHP. If you don’t find this part in your phpinfo() output then you will need to find a server that does support the libraries.

So, what are we going to learn in this tutorial? Let’s have a look:

· Basic concepts
· Drawing lines
· Drawing polygons
· Drawing rectangles
· Drawing circles and ellipses
· Filling shapes
· Writing text on an image
· Outputting the image

That said, let’s get going! First of all, some basic concepts:

Basic Concepts
The first thing you should learn about GDlib is its capabilities. GD is a library of PHP functions that allows you to alter or create images online. You can adjust the output quality, load files and alter them, or create new images from scratch. PHP images can be used just like any other image, i.e. you could use the following HTML to display a dynamic PHP image on a webpage:

<img src=”myscript.php” style=”width: 400px; height: 200px” alt=”My dynamic PHP image” />

This is an example of valid XHTML syntax to display a dynamic image on a webpage. Note that a lot of things are depreciated in XHTML, so you can’t use attributes like height or width anymore, which is why I used a CSS-style definition instead. You can apply id’s or classes if that is your fancy.

So, let’s start with some basic concepts. When you create an image from scratch, you use the imagecreate() function to create a canvas. Its attributes are the x width and the y width. Here’s an example of the code for a 800x400px canvas:
 

You really need to get used to using image identifiers in GD, $im is the default variable and is used a lot, although you don’t have to use if you don't like it for some reason.

Next up, let’s learn how to allocate some colours, using imagecolorallocate(). With this, you can define colours for anything, and it is essential if you want colours in your image. This function accepts arguments 4 arguments: [image identifier], [R], [G], [B]. You put your image identifier variable in place, and numbers between 1 and 255 for each colour (red, green and blue). You can define as many different variables as you like in different variables. Let’s have a look at an example I prepared earlier:

Coordinates are pretty easy to understand, using the concept: x, y, the top left corner is 0, 0. So if we have a 150px square image, the top right corner will be 150, 0, the bottom left will be 0, 150, and the bottom right will be 150, 150.

Outline functions (non fill functions) will by default draw a 1px outline, and you can figure out for yourself how to make thicker lines... ;)

Finally, let’s find out how to load an image as opposed to creating a canvas. There are special PHP functions to load images, and you can load an image in the following main formats: .jpeg, .gif, .wbmp, and .png. Instead of defining the image identifier with imagecreate() we simply define it using one of the following functions:

· JPG/JPEG: imagecreatefromjpeg([filename])
· GIF: imagecreatefromgif([filename])
· BMP: imagecreatefromwbmp([filename])
· PNG: imagecreatefrompng([filename])

And that’s it! You can run a few protection procedures if you like, to check whether the image was opened or not - all of these functions return false if there was an error.

Right. That’s the basic principles of GD out of the way.  You will need to know how to output the image once you’re finished, but that topic will be covered last.

Drawing Lines
At last, we’re finally getting into the art! Starting with lines, let’s examine the function we will be using:

imageline ( [image] , [x1] , [y1] , [x2] , [y2] , [color] )

Our function imageline() accepts 6 arguments: the image identifier, the x and y coordinates of the starting point for the line, the x and y coordinates for the end point of the line and the colour identifier for the line (a variable containing a call to imagecolorallocate() or similar).

You don’t call this function from within a variable, you simply call it, so let’s try drawing a red line from 0,0 to 150,150 on an image:
 

And it’s done! Once the output functions have been put in, you will have a white 150px square image with a red line from the top left corner to the bottom right. It should look something like this:

Drawing Polygons
The functions for drawing shapes are essentially simple to understand. The function we use to draw a polygon is called imagepolygon(). It accepts 4 arguments: the image identifier, an array containing each point’s x and y coordinate, the number of points in total and the colour.

For the following example, I’ll make it easier by using the array function count() to define the number of points for you, so all you will have to do is add new points to the array.     This example will create a 400x400px canvas and draw a triangle on it:
 

And that's how we draw a triangle on a black canvas. After you have done this, and put in the outputting code, your image should look something like this:

A neat trick to try when using the imagepolygon() function is to define random points using mt_rand() instead of defining points. This can produce a cool effect, similar to this:

The above code is the same as the example above, except with the $points array defined like this: