• 0

[PHP Tutorial] Dynamic Images using GD2


Question

Hey Everyone,

There's been a number of topics regarding this information, so I thought I'd make a short tutorial based on the informaiton I've been working on the past 2 weeks.

After finding out about Brandon Fullers iTunes Now Playing plugin, I decided I wanted to learn how to write information ontop of an existing image using PHP's GD2 plugin.

Essentially this plugin allows a programmer to write letters, draw boxes, and merge picture information.

The way I've decided to do this, is show you the code I use for one of my current forum signatures and explain each section of it.

This image was created to display a random quote based on a list provided within the file.

1. Tell the browser that the file is going to be an image using the Header() funtion.

<?php

// tell the user's browser that it is an image

header("Content-type: image/png");

2. Throughout the entire generation process the $image variable is used for all text inputs and applicable variables. In this part of the code, you see that I am creating an image from a pre-existing image file using: createimagefrompng(). You can use gifs jpgs or bmps. But I reccommend PNG's.

The PNG I'm using as a 'blank' is: quote.png

And the code that calls this:

// load the background

$image = imagecreatefrompng("quote.png");

**note, the image will automatically size itself to the size of the existing image.

2a. Looking back, so far we've told the browser we're making an image. Then we told PHP to create an image, using an existing image as the background.

3. The next step in this script is to define some static colour variables. To do this we use: imagecolorallocate(), you will also need to know the color you wish to use in RBG format.

// define the color black (the colour of the text)

$clr_black = imagecolorallocate($image, , , );

$clr_white = imagecolorallocate($image, 255, 255, 255);

4. This next section mostly pertains to having randomized text in the image. I prefer to use the rand() function, which will generate a random number between two given numbers. I then use the switch() function to set the text variables that are to be used in the image.

//Get a random number

$num = rand(1,3);

//Start the switch function

switch

($num) {

*Note, the rand(1,3) will produce a number between 1 and 3. Obviouosly this works if you only have 3 different text sources you would want to use. If you had 4 text sources, you should increase the last number to 4.

5. Now its time to add the text variable(s). Each variable consists of two strings, 1 quote and 1 author. Depending on the outcome of rand(), switch() will choose one case, and that case will set the variables: $quote and $author, which are used in the image generation.

//First quote

case 1:

$quote = "Nothing strengthens authority so much as silence.";

$author = "Leonardo Da Vinci";

break;

//Second Quote

case 2:

$quote = "My life is one long curve, full of turning points.";

$author = "Pierre Elliott Trudeau";

break;

//Third Quote

case 3:

$quote = "It\'s amazing what you can accomplish if you do not care who gets the credit.";

$author = "Leonardo Da Vinci";

break;

**Note I've added slashes before each ' or ". This is important, but they will be removed before the image is generated.

6. Now we 'float' the text overtop of the existing image using the ImageTTFText() function. This uses a .TTF file (Font file) to create text. To use this, you MUST have a .TTF file in your directory tree. You can find these in your C:\Windows\Fonts directory. You'll also noticed that stripslashes() is used to remove any slashes that might be in the string. WordWrap() is used in case the string is so long that it would run right off the side of the image. I used 90 because that works best for my image. To make this fit to your image, use guess and test (change it till it works :p).

//Add text to image (img, size, angle, x,y, colour, .ttf, text)

ImageTTFText($image, 8, , 180, 53, $clr_black, "ariali.TTF", stripslashes($author));

ImageTTFText($image, 9, , 5, 14, $clr_black, "arial.TTF", wordwrap(stripslashes($quote), 90));

**Note Explanation of the variables in ImageTTFText():

ImageTTFText($image, font_size, angle, x-Coordinate,y-Coordinate, color, .ttf_file, text)

7. Now its time to make the image! imagepng() tells PHP time to generate the image. imagedestroy() destroys the image so its only generated once.

// and now... we display the image

imagepng($image);

imagedestroy($image);

Full Script:

<?php

// tell the user's browser that it is an image

header("Content-type: image/png");

// load the background

$image = imagecreatefrompng("quote.png");

// define the color black (the colour of the text)

$clr_black = imagecolorallocate($image, , , );

$clr_white = imagecolorallocate($image, 255, 255, 255);

//Get a random number

$num = rand(1,3);

//Start the switch function

switch

($num) {

//First quote

case 1:

$quote = "Nothing strengthens authority so much as silence.";

$author = "Leonardo Da Vinci";

break;

//Second Quote

case 2:

$quote = "My life is one long curve, full of turning points.";

$author = "Pierre Elliott Trudeau";

break;

//Third Quote

case 3:

$quote = "It\'s amazing what you can accomplish if you do not care who gets the credit.";

$author = "Leonardo Da Vinci";

break;

}

//Add text to image (img, size, angle, x,y, colour, .ttf, text)

ImageTTFText($image, 8, , 180, 53, $clr_black, "ariali.TTF", stripslashes($author));

ImageTTFText($image, 9, , 5, 14, $clr_black, "arial.TTF", wordwrap(stripslashes($quote), 90));

// and now... we display the image

imagepng($image);

imagedestroy($image);

?>

I hope this little tutorial is useful, and makes sense :p. I'd be happy to answer any questions you might have about using GD2 in PHP to generate images on the fly!

Also if you have any suggestions or reccomendations on this little tut feel free to post them too!

Thanks for reading!

-Ax

Edited by Axon
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Neato. Been meaning to do some php graphics for ages. One thing that has stopped me is the questionable support from host to host :blush: How normal is it for a host to have the GD (1 or 2) libraries installed?

Cheers (Y)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.