- Drop me a line! Contact me here.
Starting Out with GD
Starting Out with GD
One of the more useful tools in PHP's box of tricks is the ability to make web graphics on the fly. This is achieved using the GD image library, and a few bits of relatively simple code. There are stacks of possible things that you can use GD for, from resizing uploaded files to creating entirely new images from scratch. The limit is your imagination.
The first thing to realise when you're starting out with GD is that there are two main versions. Theres GD 1.6, and GD 2.x. GD 1.6 is more common on internet hosts as its been around longer and for a long time it was the only version to support GIF images. GD 2.x is the latest version, and has support for things like true colour images, anti-aliasing, and some new functionality like drawing ellipses. For this article we will concentrate on GD 1.6 as the code is then more likely to work with every PHP and GD installation.
As we're using GD 1.6 we have to use the imagecreate() function to start a new image.
This will give us an image 200*200 pixels to work with. If we had GD 2.0 or higher available we could use the imagecreatetruecolor() function. This would mean our image could have 16.7 million colours rather than the 256 colours that imagecreate() is limited to.
In order to draw something we need to assign a colour to our image.
You can also assign a colour to be transparent. This will only work however if you save your image as a GIF or PNG file as the end. JPG files cannot contain transparency. This is a feature of JPGs, not PHP or GD.
To assign a colour to be transparent we can either create a transparent colour, or else we can set one of the colours we have assigned already to be transparent. This is useful if you're working with an image that you have created in a paint program as you can change colours to be transparent in a script rather than saving several images with different transparent colours.
Now that we have an image and some colours to draw with we can get to the business of drawing something. When GD creates an image it starts out with a black background. In this example we need to have a white background instead. There are two main ways to colour the background in. The first is by using the imagefill() function to flood fill the whole area with a single colour.
0,0 is the top left corner of the image. As there is nothing to stop the fill it just floods the entire image with white.
The alternative method of filling the image is to draw a filled rectangle starting at coordinates 0,0 and extending for the entire size of the image.
Both methods of filling the background are equally effective, and just as fast as one another, so its really just a matter of choosing which you prefer to use.
The first thing to realise when you're starting out with GD is that there are two main versions. Theres GD 1.6, and GD 2.x. GD 1.6 is more common on internet hosts as its been around longer and for a long time it was the only version to support GIF images. GD 2.x is the latest version, and has support for things like true colour images, anti-aliasing, and some new functionality like drawing ellipses. For this article we will concentrate on GD 1.6 as the code is then more likely to work with every PHP and GD installation.
As we're using GD 1.6 we have to use the imagecreate() function to start a new image.
<?php
$image = imagecreate(200,200);
?>
This will give us an image 200*200 pixels to work with. If we had GD 2.0 or higher available we could use the imagecreatetruecolor() function. This would mean our image could have 16.7 million colours rather than the 256 colours that imagecreate() is limited to.
In order to draw something we need to assign a colour to our image.
<?php
$black = imagecolorallocate($image,0,0,0);
$white = imagecolorallocate($image,255,255,255);
$red = imagecolorallocate($image,255,0,0);
?>
You can also assign a colour to be transparent. This will only work however if you save your image as a GIF or PNG file as the end. JPG files cannot contain transparency. This is a feature of JPGs, not PHP or GD.
To assign a colour to be transparent we can either create a transparent colour, or else we can set one of the colours we have assigned already to be transparent. This is useful if you're working with an image that you have created in a paint program as you can change colours to be transparent in a script rather than saving several images with different transparent colours.
<?php
$transparent = imagecolortransparent($image);
?>
Now that we have an image and some colours to draw with we can get to the business of drawing something. When GD creates an image it starts out with a black background. In this example we need to have a white background instead. There are two main ways to colour the background in. The first is by using the imagefill() function to flood fill the whole area with a single colour.
<?php
imagefill($image,0,0,$white);
?>
0,0 is the top left corner of the image. As there is nothing to stop the fill it just floods the entire image with white.
The alternative method of filling the image is to draw a filled rectangle starting at coordinates 0,0 and extending for the entire size of the image.
<?php
imagefilledrectangle($image,0,0,200,200,$white);
?>
Both methods of filling the background are equally effective, and just as fast as one another, so its really just a matter of choosing which you prefer to use.
The next step is to draw a border around our image. This is achieved by drawing an unfilled rectangle slightly within the confines of the image. The function to draw an unfilled rectangle is imagerectangle().
By now our image should be a white square with a single pixel white border around the outside.
The next thing to do is to add an image to the middle. We'll be copying from another image.
Now that we have our image that we wish to copy from we need to now how large it is in order to copy it. Using the functions imagesx() and imagesy() we can find this out very easily. We also need to calculate where in our image we wish to place the copied image data.
In our final image we need the picture of the girl to be placed centrally, but with enough space to place a caption below it, so we will simply place the image 15 pixels down on our final image.
The next stage is to copy the data from the image of the girl to our image. To do this we need to use the imagecopy() function. It is rather more complicated than previous image commands as there is a long list of variables that are required.
This copies to $image, from $girl, to the coordinates that we calculated in step 9. We are copying from position 0,0 in our picture of a girl, and taking the full dimensions of the gir image that were placed into $x and $y in step 9.
Finally we need to add a caption to our picture. There are many ways to add text to an image using GD depending on which libraries are complied into your version of PHP. To keep things simple however we will stick with the built in text creation tools.
The function imagestring() is what we use to write text onto images. imagestring() gives access to 6 built in fonts, each varying in size and weight. Normal text is font number 4, but as the built in fonts start from 0 it is numbered 3. To calculate the width of the text we will be placing on our image we need to know the width of each letter in the font. This is found using the imagefontwidth() function. We then multiply that with the number of letters in our caption string.
<?php
imagerectangle($image,0,0,199,199,$black);
?>
By now our image should be a white square with a single pixel white border around the outside.
The next thing to do is to add an image to the middle. We'll be copying from another image.
<?php
$girl = imagecreatefrompng("girl.png");
?>
Now that we have our image that we wish to copy from we need to now how large it is in order to copy it. Using the functions imagesx() and imagesy() we can find this out very easily. We also need to calculate where in our image we wish to place the copied image data.
In our final image we need the picture of the girl to be placed centrally, but with enough space to place a caption below it, so we will simply place the image 15 pixels down on our final image.
<?php
$x = imagesx($girl);
$y = imagesy($girl);
$px = ((200-$x)/2);
$py = 15;
?>
The next stage is to copy the data from the image of the girl to our image. To do this we need to use the imagecopy() function. It is rather more complicated than previous image commands as there is a long list of variables that are required.
<?php
imagecopy($image,$girl,$px,$py,0,0,$x,$y);
?>
This copies to $image, from $girl, to the coordinates that we calculated in step 9. We are copying from position 0,0 in our picture of a girl, and taking the full dimensions of the gir image that were placed into $x and $y in step 9.
Finally we need to add a caption to our picture. There are many ways to add text to an image using GD depending on which libraries are complied into your version of PHP. To keep things simple however we will stick with the built in text creation tools.
The function imagestring() is what we use to write text onto images. imagestring() gives access to 6 built in fonts, each varying in size and weight. Normal text is font number 4, but as the built in fonts start from 0 it is numbered 3. To calculate the width of the text we will be placing on our image we need to know the width of each letter in the font. This is found using the imagefontwidth() function. We then multiply that with the number of letters in our caption string.
The caption for our image that we will be using is "A girl". Pretty descriptive, huh?
Now we have calculated where to place the text we need to write it to the image.
Now we've completed our image.
To output the image to a web browser we need to send the correct mime header, and the image data complied into an image file. For most photographic type images we should use the JPG file format as this is better designed for compressed that sort of data.
In this case though we are best off using the PNG file format as it is better at handling small graphics with limited palettes. The mime type for a PNG image is image/png, so we send that using the header function first. Then we send the image data with the imagepng() function.
The imagepng() function also has the option to save the image if required. This is useful if you want to generate an image that will be used over and over again as you can generate the image using an administration form, and then display it on the front end of your web site as an ordinary web graphic.
Finally there is one last step to creating a graphic file on the fly, and that is to close all the image resources at the end of your script. This is good house keeping really, and while it isn't strictly necessary it is definitely a good idea. If your script were to malfunction it might leave things behind when it closes and take up valuable memory on the server.
There is considerably more functionality to the GD library and its associated PHP functions. Have a play, its great fun.
<?php
$caption = "A girl";
$fontwidth = imagefontwidth(3);
$txtwidth = strlen($caption)*$fontwidth;
$txtx = ((200-$txtwidth)/2);
?>
Now we have calculated where to place the text we need to write it to the image.
<?php
imagestring($image,3,$txtx,180,$caption,$red);
?>
Now we've completed our image.
To output the image to a web browser we need to send the correct mime header, and the image data complied into an image file. For most photographic type images we should use the JPG file format as this is better designed for compressed that sort of data.
In this case though we are best off using the PNG file format as it is better at handling small graphics with limited palettes. The mime type for a PNG image is image/png, so we send that using the header function first. Then we send the image data with the imagepng() function.
<?php
header("Content-type: image/png");
imagepng($image);
?>
The imagepng() function also has the option to save the image if required. This is useful if you want to generate an image that will be used over and over again as you can generate the image using an administration form, and then display it on the front end of your web site as an ordinary web graphic.
Finally there is one last step to creating a graphic file on the fly, and that is to close all the image resources at the end of your script. This is good house keeping really, and while it isn't strictly necessary it is definitely a good idea. If your script were to malfunction it might leave things behind when it closes and take up valuable memory on the server.
<?php
imageclose($girl);
imageclose($image);
?>
There is considerably more functionality to the GD library and its associated PHP functions. Have a play, its great fun.
- © Ooer.com Chris Neale 2007
- PHPGD.com
- Powered by PHP
- Database by MySQL
- DB Queries: 3
- DB Time: 0.0114 seconds
