Sunday 31 Aug 2008

Images in PHP with GD2

Computer and PHP tutorials

As I already said earlier, PHP can not only make web pages. We can also generate images. First, let's see how to add a text on an image.

As it's a very long tutorial, which will be followed by other articles about images management in PHP, I divided it in two parts.

Images in PHP with GD2 - Part 1 image creation

Possible uses include

  • create nice image titles with complex fonts like above (see the image address ;-) ),
  • add a signature text on all your images,
  • make a captcha (anti-spam image),
  • put dynamic text coming from PHP variables in images.

For this last point, that can allow to shows data about your visitor like the Danasoft signs:


So how does it work? :-)

First the GD2 librairy must be enabled on your hosting. But it's OK, it's the case most of the time. Then, there are a lot of things to know, so the article is a bit long, but you will remember easily when using it. :-p

The MIME type

The MIME type is the first thing a browser receiving a file will read. It indicates the type of the incoming file. in our case we try to send images, we must send the MIME type corresponding to the image format (PNG, GIF, JPEG ...). We will make only PNG actually because it's the best possible choice for a text in an image.

So the MIME type will be "image/png" and it must be sent by using the PHP function header. It gives: header("Content-type: image/png");

Once this line added at the beginning of our PHP file, the browser will understand that this file is a PNG image and its content will be interpreted as a file with the .png extension, while it's in fact a .php.

NB : Instructions header must be the first thing sent to the browser. They must be put before sending any text (including blank lines or spaces that could be before entering in PHP mode with <?php). I have already talked about this in the articles Dynamic CSS or Javscript and RSS Atom feeds. It prooves we can send any sort of content with PHP, if we indicate the correct MIME type.

End of introduction, let's start the serious thing!

Creation of the image

First we must create an empty image, or open an existing image. This time, we are going to make only an empty image. This is very simple: indicate the image size to the function imagecreate or imagecreatetruecolor. The latter gives better quality, but makes heavier images. For example to create a 800 by 600 pixels image:
$image = imagecreatetruecolor (800, 600);

This returns a variable which is an identifier to an image resource, like a pointer to the image in memory. This variable will be given in parameter to all the functions working on this image.

The obtained and modified by PHP images are then sent to the browser with functions depending on the desired type. As I chose the MIME type for PNG, my function is imagepng ($image);

So $image is my est image resource. After sending it, we must destroy it to free this memory with imagedestroy($image)

Note that it's possible to save the resulting image in a file instead of sending it to the browser immediatly. This is simply done by adding a file name in the parameters: imagepng ($image, 'file.png').

When you create or modify an image, you have the choice:

  • or to save it, then use it later like any image file,
  • or to use the image in a distinct PHP file, containing the header function, that you call in HTML with <img src="generated_image.php" alt="image" /> (it's what I do in this tutorial).

The colors

To choose the colors to draw, we must use the function imagecolorallocate with the parameters: an image, then the color in RGB (red, green, blue). It means we indicate each color level between 0 and 255.

We can also use the hexadecimal form, like in HTML from 00 to FF. For example the blue is #0000FF.
imagecolorallocate($image, 0, 0, 255) //with integers, or
imagecolorallocate($image, 0x00, 0x00, 0xFF) //with hexadecimal values.

Note: with imagecreate the first given color with imagecolorallocate define the background color, while with imagecreatetruecolor a large rectangle must be drawn to have a different background (you will see that in the final example). ;-)

text in image

café Did this article help you? 
Buy me a coffee!

One answer at “Images in PHP with GD2”

  1. Backlink from Write a text on an image - Azure Dev

Leave a comment (all comments are moderated, don't waste time with spam)

Azure Dev