How to create images with PHP GD Library

By | May 10, 2015

There are some points in development that you want to generate and edit images to be viewed probably on a web page. You could edit an image and put content on it with either PhotoShop or other photo editing software, but that is only when you have limited and pre-known content to put on the image.

What if you have an entirely dynamic scheme of image editing to provide on your website? Examples are:

  • Editing the banner of a wedding website to have the name of the couple on a background image. Example is found on Weddings – XM Events, which i worked on.
  • Creating a captcha image for authentication purpose
  • Creating a best selling photo editing web page like when a user comes, type in his or her name, and he or she gets an edited photo that contains his or her name. A good example is to provide a website that enables fans of a specific football club to download the picture of a customized jersey of their team with their names written on it.
  • The popular Coca Cola’s share a bottle of coke with your friend and you can type in your name and get the picture of the can with your name written on it is also an example.
  • And many more…

We are going to be learning how to dynamically generate images with PHP with the use of the GD Library. This is a good means because:

  • It can be used to generate any form of image with or without textual context on it.
  • It does not create any file on the server, it just generates and output the image, hence conserving the server space, unless you want otherwise.
  • Images from file can be used, so you can pick images for background or use

We will be using the PHP GD functions. You have to compile PHP with the GD library of image functions. This might come with your PHP installation.

The full GD PHP function is found on PHP: GD – Manual.

We are going to be using few of the GD Image functions to create an image and write text to it.

Example 1

In this example we will be writing a simple string and output it as image. The first thing that comes when you are outputting image is to send the Content-type header to image/your_image_type.

To create the image object, call the imagecreatetruecolor() function, and pass in the size of the image to be created:

Now let’s create two colors: black and white. We are going to fill the image with the white and write our string on the image with black color later on. To create colors:

Now we are going to fill the image with the color white as earlier said:

Now we print our text on the image:

Note that all the image functions takes the image as the first argument. For more on the imagestring function look PHP: imagestring – Manual

A complete function for imagestring above

Now to use this:

This above script will produce a white filled image of 200 x 50 with the text ICT Giants written on it.

Using advance font and image files

The above example is pretty simple in use and its real applicable use may not be more than just displaying a result of activities in form of image. But for a more graphical image designing, the functions are a little bit different.

I am going to take us through another example where we will use a picture as our background and we will output text on it with a more graphical font by using functions that allow us to load an image file and also use a .ttf font file.

Example 2

Firstly, you need to have a picture file you want to use as the background and the .ttf file of the font you will like to use. In this example I will be using my files background.jpg and KunstlerScript.ttf

Creating the image from file

The imagettftext function writes on the picture, the imagejpeg() function outputs the image, and the imagedestroy() function cleans the memory.

The variables assigned above ensures clarity on the use of use of the imagettftext() function except the ‘0’ value supplied after the font size. This is the angle of rotation of the text to be printed in degrees. 0 degrees means an horizontal text.

This function can be reused in several ways to perform highly graphical outputting of text. For example print the same text with different colors in a way that they overlap and form text shadows or spines. I have done some great designs with this function and you can do better!

Cheers!

Drop your comment in the comment box. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *