What is the GD Library?
The GD library is used for dynamic image creation. From PHP we use with the GD library to create GIF, PNG or JPG images instantly from our code. This allows us to do things such as create charts on the fly, created an an anti-robot security image, create thumbnail images, or even build images from other images.
If you are unsure if you have GD library, you can run phpinfo() to check that GD Support is enabled.
If you don't have it, you can download it for free.
This tutorial will cover the very basics of creating your first image. You should already have some PHP knowledge before you start.
Rectangle With Text
Playing with Fonts
This allows us to choose our font, which must be in TTF format.
The first parameter is our handle, then font size, rotation, starting X, starting Y, text color, font, and finally our text. For the font parameter, you need to include the path to font file. For our example I have placed the font Quel in a folder called Fonts. As you can see from our example, we have also set the text to print at a 15 degree angle.
If your text isn't showing, you may have the path to your font wrong. Another possibility is that your Rotation, X and Y parameters are placing the text outside of the viewable area.
Drawing Lines
In this code, we use ImageLine () to to draw a line. The first parameter is our handle, followed by our starting X and Y, our ending X and Y, and finally our color.
To make a cool volcano like we have in our example, we simply put this into a loop, keeping our starting coordinates the same, but moving along the x axis with our finishing coordinates.
Drawing An Ellipse
The parameters we use with Imageellipse () are the handle, the X and Y center coordinates, the width and height of the ellipse, and the color. Like we did with our line, we can also put our ellipse into a loop to create a spiral effect.
Using imagefilledarc we can create a pie, or a slice. The parameters are: handle, center X & Y, width, height, start, end, color, and type. The start and end points are in degrees, starting from the 3 o'clock position.
The types are:
We can lay a second arc underneath to create a 3D effect like shown in our example above. We just need to add this code in under the colors and before the first filled arc.
We also change are headers accordingly. You can also use ImageJpeg () to create a JPG, as long as the headers change to reflect it appropriately.
You can call the php file just like you would a normal graphic. For example:
The GD library is used for dynamic image creation. From PHP we use with the GD library to create GIF, PNG or JPG images instantly from our code. This allows us to do things such as create charts on the fly, created an an anti-robot security image, create thumbnail images, or even build images from other images.
If you are unsure if you have GD library, you can run phpinfo() to check that GD Support is enabled.
If you don't have it, you can download it for free.
This tutorial will cover the very basics of creating your first image. You should already have some PHP knowledge before you start.
Rectangle With Text
<?php
header ("Content-type: image/png");
$handle = ImageCreate (130, 50) or die ("Cannot Create image");
$bg_color = ImageColorAllocate ($handle, 255, 0, 0);
$txt_color = ImageColorAllocate ($handle, 0, 0, 0);
ImageString ($handle, 5, 5, 18, "PHP.About.com", $txt_color);
ImagePng ($handle);
?>- With this code we are creating a PNG image. In our first line, the header, we set the content type. If we were creating a jpg or gif image, this would change accordingly.
- Next we have the image handle. The two variables in ImageCreate () are the width and height of our rectangle, in that order. Our rectangle is 130 pixels wide, and 50 pixels high.
- Next we set our background color. We use ImageColorAllocate () and have four parameters. The first is our handle, and the next three determine the color. They are the Red, Green and Blue values (in that order) and must be an integer between 0 and 255. This website gives you the integers for basic web colors if you are not familiar with choosing colors in this format. In our example we have chosen red.
- Next we choose our text color, using the same format as our background color. We have chosen black.
- Now we enter the text we want to appear in our graphic using ImageString (). The first parameter is the handle. Then the font (1-5), starting X ordinate, starting Y ordinate, the text itself, and finally it's color.
- Finally ImagePng () actually creates the PNG image.
Playing with Fonts
<?php
header ("Content-type: image/png");$handle = ImageCreate (130, 50) or die ("Cannot Create image");$bg_color = ImageColorAllocate ($handle, 255, 0, 0);$txt_color = ImageColorAllocate ($handle, 0, 0, 0);ImageTTFText ($handle, 20, 15, 30, 40, $txt_color, "/Fonts/Quel.ttf", "Quel"); ImagePng ($handle);?> Although most of our code has stayed the same you will notice we are now using ImageTTFText () instead of ImageString ().This allows us to choose our font, which must be in TTF format.
The first parameter is our handle, then font size, rotation, starting X, starting Y, text color, font, and finally our text. For the font parameter, you need to include the path to font file. For our example I have placed the font Quel in a folder called Fonts. As you can see from our example, we have also set the text to print at a 15 degree angle.
If your text isn't showing, you may have the path to your font wrong. Another possibility is that your Rotation, X and Y parameters are placing the text outside of the viewable area.
Drawing Lines
<?php header ("Content-type: image/png");$handle = ImageCreate (130, 50) or die ("Cannot Create image");$bg_color = ImageColorAllocate ($handle, 255, 0, 0);$txt_color = ImageColorAllocate ($handle, 255, 255, 255);$line_color = ImageColorAllocate ($handle, 0, 0, 0);ImageLine($handle, 65, 0, 130, 50, $line_color);ImageString ($handle, 5, 5, 18, "PHP.About.com", $txt_color);ImagePng ($handle);?>In this code, we use ImageLine () to to draw a line. The first parameter is our handle, followed by our starting X and Y, our ending X and Y, and finally our color.
To make a cool volcano like we have in our example, we simply put this into a loop, keeping our starting coordinates the same, but moving along the x axis with our finishing coordinates.
<?phpheader ("Content-type: image/png");$handle = ImageCreate (130, 50) or die ("Cannot Create image");$bg_color = ImageColorAllocate ($handle, 255, 0, 0);$txt_color = ImageColorAllocate ($handle, 255, 255, 255);$line_color = ImageColorAllocate ($handle, 0, 0, 0);for($i=0;$i<=129;$i=$i+5){ImageLine($handle, 65, 0, $i, 50, $line_color);}ImageString ($handle, 5, 5, 18, "PHP.About.com", $txt_color);ImagePng ($handle);?> Drawing An Ellipse
<?phpheader ("Content-type: image/png");$handle = ImageCreate (130, 50) or die ("Cannot Create image");$bg_color = ImageColorAllocate ($handle, 255, 0, 0);$txt_color = ImageColorAllocate ($handle, 255, 255, 255);$line_color = ImageColorAllocate ($handle, 0, 0, 0);imageellipse ($handle, 65, 25, 100, 40, $line_color);ImageString ($handle, 5, 5, 18, "PHP.About.com", $txt_color);ImagePng ($handle);?> The parameters we use with Imageellipse () are the handle, the X and Y center coordinates, the width and height of the ellipse, and the color. Like we did with our line, we can also put our ellipse into a loop to create a spiral effect.
<?phpheader ("Content-type: image/png");$handle = ImageCreate (130, 50) or die ("Cannot Create image");$bg_color = ImageColorAllocate ($handle, 255, 0, 0);$txt_color = ImageColorAllocate ($handle, 255, 255, 255);$line_color = ImageColorAllocate ($handle, 0, 0, 0);for($i=0;$i<=130;$i=$i+10){imageellipse ($handle, $i, 25, 40, 40, $line_color);}ImageString ($handle, 5, 5, 18, "PHP.About.com", $txt_color);ImagePng ($handle);?> If you need to create a solid ellipse, you should use Imagefilledellipse () instead. <? header('Content-type: image/png'); $handle = imagecreate(100, 100); $background = imagecolorallocate($handle, 255, 255, 255); $red = imagecolorallocate($handle, 255, 0, 0); $green = imagecolorallocate($handle, 0, 255, 0); $blue = imagecolorallocate($handle, 0, 0, 255); imagefilledarc($handle, 50, 50, 100, 50, 0, 90, $red, IMG_ARC_PIE); imagefilledarc($handle, 50, 50, 100, 50, 90, 225 , $blue, IMG_ARC_PIE); imagefilledarc($handle, 50, 50, 100, 50, 225, 360 , $green, IMG_ARC_PIE); imagepng($handle); ?> Using imagefilledarc we can create a pie, or a slice. The parameters are: handle, center X & Y, width, height, start, end, color, and type. The start and end points are in degrees, starting from the 3 o'clock position.
The types are:
- IMG_ARC_PIE- Filled arch
- IMG_ARC_CHORD- filled with straight edge
- IMG_ARC_NOFILL- when added as a parameter, makes it unfilled
- IMG_ARC_EDGED- Connects to center. You will use this with nofill to make an unfilled pie.
We can lay a second arc underneath to create a 3D effect like shown in our example above. We just need to add this code in under the colors and before the first filled arc.
$darkred = imagecolorallocate($handle, 0x90, 0x00, 0x00); $darkblue = imagecolorallocate($handle, 0, 0, 150);
// 3D look for ($i = 60; $i > 50; $i--) { imagefilledarc($handle, 50, $i, 100, 50, 0, 90, $darkred, IMG_ARC_PIE); imagefilledarc($handle, 50, $i, 100, 50, 90, 360 , $darkblue, IMG_ARC_PIE); }
<?phpheader ("Content-type: image/gif");$handle = ImageCreate (130, 50) or die ("Cannot Create image");$bg_color = ImageColorAllocate ($handle, 255, 0, 0);$txt_color = ImageColorAllocate ($handle, 0, 0, 0);ImageString ($handle, 5, 5, 18, "PHP.About.com", $txt_color);ImageGif ($handle);?> So far all of the images we have created have been PNG format. Above, we are creating a GIF using the ImageGif () function.We also change are headers accordingly. You can also use ImageJpeg () to create a JPG, as long as the headers change to reflect it appropriately.
You can call the php file just like you would a normal graphic. For example:
<img src="http://www.yoursite.com/YourScript.php">
Source...