GD Library - The Basics of Drawing with PHP

Male designer with tattoos drawing at desk.
(Gary Burchell/Getty Images)
01
of 07

What is the GD Library?

woman at laptop
(startupstockphotos.com/Pexels.com/CC0)

The GD library is used for dynamic image creation. From PHP we use ​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 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.

02
of 07

Rectangle With Text

man at laptop
(unsplash.com/Pexels.com/CC0)
 <?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);

 ?>
  1. 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.
  2. 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.
  3. 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. In our example, we have chosen red.
  4. Next, we choose our text color, using the same format as our background color. We have chosen black.
  5. 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.
  6. Finally, ImagePng () actually creates the PNG image.
03
of 07

Playing with Fonts

person at computer
(Susie Shapira/Wikimedia Commons)
<?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, we 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.

04
of 07

Drawing Lines

person at laptop
(Pexels.com/CC0)
<?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 ​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.

<?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); 
 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); 
 ?> 
05
of 07

Drawing An Ellipse

person at laptop
(Pexels.com/CC0)
<?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); 
 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.

<?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); 
 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.

06
of 07

Arcs & Pies

two people programming at computer
(Calqui/Wikimedia Commons/CC BY-SA 3.0)
<?
 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:

  1. IMG_ARC_PIE- Filled arch
  2. IMG_ARC_CHORD- filled with straight edge
  3. IMG_ARC_NOFILL- when added as a parameter, makes it unfilled
  4. 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); }

 

07
of 07

Wrapping Up the Basics

person at laptop
(Romaine/Wikimedia Commons/CC0)
<?php 
 header ("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"> 
Format
mla apa chicago
Your Citation
Bradley, Angela. "GD Library - The Basics of Drawing with PHP." ThoughtCo, May. 21, 2017, thoughtco.com/gd-library-basics-drawing-with-php-2693791. Bradley, Angela. (2017, May 21). GD Library - The Basics of Drawing with PHP. Retrieved from https://www.thoughtco.com/gd-library-basics-drawing-with-php-2693791 Bradley, Angela. "GD Library - The Basics of Drawing with PHP." ThoughtCo. https://www.thoughtco.com/gd-library-basics-drawing-with-php-2693791 (accessed November 19, 2017).