Mar
25
2010

 

PHP is a powerful scripting language and there are many powerful plug-ins available. One of them is GD, which can be used to create images on the fly. GD, originally developed by Thomas Boutell by far is the most popular image-processing library for PHP (it is also available for other languages like Perl).

GD has been bundled with PHP since PHP version 4.3, so it is likely that your PHP already has GD installed — otherwise, see this installation instruction.

You can run phpinfo() to see if GD is installed — the screen below shows that it is installed.

Follow these links to read more about GD:

Although the ability to manipulate and create images will soon be supllanted by HTML5, GD is still useful in many cases. For example to prevent saving original image by adding watermark, since PHP works on the server side, the original image never reaches the user’s machine and the will never be on the user’s cache.

Example 1: Creating an image.

Below I created an image using GD and outputted the image as JPEG. I created a very simple image of 300×200 pixels, showing a red rectangle in the center. Note that the first call to imageColorAllocate sets the background color of the image.

[c]
<?php
   // Create an image with the specified dimensions
   $image = imageCreate(300,200);

   // Create a color (this first call to imageColorAllocate 
   //  also automatically sets the image background color)
   $colorRed = imageColorAllocate($image, 255,0,0);
   // Create another color
   $colorYellow = imageColorAllocate($image, 255,255,0);

   // Draw a rectangle
   imageFilledRectangle($image, 50, 50, 250, 150, $colorYellow);

   // Set type of image and send the output
   header("Content-type: image/jpeg");
   imageJpeg($image);
 
   // Release memory
   imageDestroy($image);
?>
[/c]

How do you embed this image in html? Use <img> tag as usual, but instead of setting the src with the image filename, enter the script name, with parameters (GET) if necessary (see Example 2). For example, the script above is named example1.php and the <img> tag looks like below.

[c]
<img src="/tutorial/php-gd-examples/example1.php"></img>
[/c]

Example 2: Text

The simplest text drawing can be done using this function:

[c]
imageString($image, $fontId, $y, $, $text, $color);
[/c]

where fontId is a number between 1 to 5 if you want to use one of the build-in GD fonts. You can load a font and get ts id using imageLoadFont if you want more fancy font.
In the example below, I created a very simple image of 300×75 pixels, showing a blue text.

[c]
<?php
   $text=$_GET['messageText'];
   
   // Set a default text if none is specified
   if (strlen($text)<=0)
      $text="No message specified.";

   // Create an image with the specified dimensions
   $image = imageCreate(300,75);

    $color = imageColorAllocate($image, 200,200,200);
    // Create a color
    $colorBlue= imageColorAllocate($image, 0,0,255);

   // Draw the string
   imageString($image, 2, 10, 30, $text, $colorBlue);

   // Set type of image and send the output
   header("Content-type: image/jpeg");
   imageJpeg($image);
 
   // Release memory
   imageDestroy($image);
?>
[/c]

This example demonstrates text rendering and retrieving parameters.

Example 3: Parameters

Retrieving parameters is actually no different than how you’d do it with regular PHP script, using $_GET or $_POST (obviously you can’t use POST when embedding in <img> tag, but you can if you are using forms.

The image tag below reads the text from the query-string ($_GET variable).

[c]
<img src="/tutorial/php-gd-examples/example2.php?messageText="This%20text%20is%20passed%20via%20query%20string"></img>
[/c]

Refer this portion of code in Example 2 to see where the variable is being read:

[c]
  $text=$_GET['messageText']; 
[/c]

Below is another example where user can interactively pass parameters in a form to customize the output. In this example, I am passing a query string ($_GET) with the variable name of messageText (you can see this variable being processed in above code in $_GET['messageText'].
Below is another example that uses form field to call the PHP script. Enter a word and an image will be created for you with the word embeded. This might gve you some e-cards ideas.

Please enter some text

Example 4: Image Quality

You might notice that image quality wasn’t very good when exporting to jpeg. To fix this, you can set the image quality in imagejpeg($image [, $filename [, $quality]]). Filename can be set to NULL if you don’t need it.

Below is two JPEGs with imag quality set at 50 and 100 (higher number produces better quality but larger file size). The bulk of the code is the same as above with the main difference being imageJpeg($image, NULL, 50)

[c]
<?php
   $text=$_GET['text'];

   // Create an image with the specified dimensions
   $image = imageCreate(300,75);

   // Create a color
   $colorYellow = ImageColorAllocate($image, 255,255,0);

   // Draw a rectangle
   ImageFilledRectangle($image, 50, 50, 200, 100, $yellowColor);

   // Set type of image and send the output
   Header("Content-type: image/jpeg");
   ImageJpeg($image);

   // Release memory
   ImageDestroy($image);
?>
[/c]

Example 5: Processing/Manipulating Image Files

Here we demonstrate how to load an image file and processing the image. To load images, there are several functions, depending on the file-type: imagecreatefrompng, imagefromjpeg, and imagefromgif and so on. In this example, we are oing to load an image and then rotate it using imageRotate. We are also outputing the image as PNG this time, just for demonstration purpose (the input and output format don’t have to be the same).

[c]
<?php
   // Create an image with the specified dimensions
   $image = imagecreatefromjpeg("S.jpg");

   // Create a color
   $colorYellow = imageColorAllocate($image, 255,255,0);

   // Rotate
   $image=imagerotate($image, 40, $colorYellow); 

   // Set type of image and send the output
   header("Content-type: image/png");
   imagePng($image);
 
   // Release memory
   imageDestroy($image);
?>
[/c]

Original image:

Rotated image:

Example 6: Adding Watermak To Images

See here: /blog/2010/03/using-php-gd-to-add-watermark-to-images/

This concludes our introduction to GD. For an example game written using PHP and GD, visit here:
http://www.permadi.com/fpcgi/9dots/index.php?sa=mkpage&ga=new

One Response to “Using PHP GD To Create Images”

  1. [...] the script, you need to have two images: icon.png and overlay.png (and have GD installed of course, see here for more on GD). Once I knew that this is working, I can change this line to accept icon filename and the script [...]