Basic Image Manipulation using GD

Basic Image Manipulation using GD
Difficulty: Easy
Description: An introduction to manipulating images using GD Library and PHP.
Author: M@ster; Date Added: 2008-08-24; Views: 11257
A few requirements for this will be to know whether or not PHP and GD lib are available to you. Most web hosts support PHP and GD library. If you're not sure if your host provides some of these services you may want to contact them first, or use phpinfo() to check.

Every now and then you'll go to a site that has a image generator, and often you'll wonder how they can take inputted text from a form and place it on an image... Well this tutorial will explain how you can go about doing that.

The first thing I'd like to take a look at is variables. A variable is like a container, that holds text or other various things. Here's and example:
<?php
$variable = "hello world";
?>

In manipulating images, variables play a very crucial part, because a variable will hold the text that will later be displayed out on an image.Now I'd like to get into explaining to you how add text to images. First of all create a page called image.php or whatever you feel like naming it as, then we need to start our page by adding the php tags:
<?php... ?>
this simply tells the browser that the text inside the tags is php. Then inside the PHP tags we want to add:
header("Content-type: image/gif");
what this does is tells the browser which type of content this file is. In this case its a .gif image. And you can replace the image/gif with image/png, image/jpg, etc and various other mime types. Now we want to create our variables which will hold the text that then will be displayed onto the images.
//Our variables containing the text to be displayed.
//This will output: Welcome to Gamexe.net
$var1 = "Welcome to";
$var2 = "Gamexe.net";

//Our font size
$font = 3;

//The image the text will be on
$image = "image.gif";
$im = ImageCreateFromgif("$image"); 

//Text color
$text_color = imagecolorallocate ($im, 0, 0,0);//black text
It is preferred that you use gif images than any other including png because gif gives you that high quality image along with the transparency, and although png has transparency it doesn't work well with PHP. Here's the image that we will be using:



Now for the code that puts it all together.
$im = ImageCreateFromgif("$image");
This is simply getting the image from wherever the $image variable says where the image is located. You may want to change the Fromgif to whatever the extension of your image file is. EX: Frompng.
imagestring ($im, $font, 10, 2,  $var1, $text_color);
imagestring ($im, $font, 10, 50,  $var2, $text_color);

imagegif ($im);
And now I'd like to take you through the code above.
imagestring ($im, $font, 10, 2,  $var1, $text_color);
This part tells the PHP where to place the text and what the font size, text color is. If you notice the numbers (10, and 2) that is the Y and X coordinates, or where the text will be place on the image; The 10 being the space from the left of the image and the 2 being the space from the top of the image. And cause we have to different variables containing text that we want to display we have to do this part twice.
imagegif ($im);
This part just simply displays the image out on the screen so you can see it. You can change the imagegif to imagepng or whatever your file extension is. Here is the final code, or what it looks like when its all put together:
<?php
header("Content-type: image/gif");

//Our variables containing the text to be displayed.
//This will output: Welcome to Gamexe.net
$var1 = "Welcome to";
$var2 = "Gamexe.net";

//Our font size
$font = 3;

//The image the text will be on
$image = "image.gif";
$im = ImageCreateFromgif("$image"); 

//Text color
$text_color = imagecolorallocate ($im, 0, 0,0);//black text


imagestring ($im, $font, 10, 10,  $var1, $text_color);
imagestring ($im, $font, 10, 50,  $var2, $text_color);

imagegif ($im);
?>
And here is the example of the outcome:



Hope the tutorial helped and that you enjoyed it!

-Ryan