riscit.info

I recently had a client that wanted to generate those dynamic images with text on them. I know you’ve seen them all over. The ones with the nude chicks holding signs saying “Alberto wuz here” or whatever. Truth is, these fan signs are really easy to make.

For this example I’m gonna use this image:

In order to write on images, you’re gonna need the GD library installed in your server. Most of the time this is already done if you’re using shared hosting or if you’ve already got a working webserver.

Save and upload that image into a dir on your server, and we’ll begin working.

We want to be able to input any string of text so we’re going to make a form for submission. Create a form using:

<form action="img.php" method="get">
<input type="text" name="line1" />
<input type="submit" name="submit" value="Do it!" />
</form>

As you can see, it’s not fancy, but it works.

Lets start off with the “Hello World” example. Save this as img.php

<?php
$string = $_GET['line1']; // lets get the text from the form
// define what image we want to write on
$im = imagecreatefromjpeg("sign.jpg");
// define the text color, red, green, blue
$textcolor = imagecolorallocate($im, 61, 61, 61);
$font = imageloadfont('Brigitte.gdf'); // tells it what font to use
imagestring($im, $font, 175, 395, $string, $textcolor); // line o'text
// header to tell the browser it's an image
header("Content-type: image/jpeg");
imagejpeg($im); // creates the image with text
imagedestroy($im); // destroys the image in the memory
?>

Let’s take a look at whats going on here. From the comments you can tell whats going on for the most part, but I can expand.

Line 1 of the code is using the GET method from the form we created to store the text in a variable called $string.

imagecreatefromjpeg() PHP function tells PHP that we want to use a JPEG image. PHP has functions for GIF, PNG and strings, BMP, XBM, XPM, and from GD itself.

We then allocate the colors we want to use for the text. imagecolorallocate() uses RGB values to do this.

imageloadfont() loads our font for writing. It can be a bit tricky to find a font suitable for writing on images and I’ve included a few in the download at the end of this article with the rest of the code. There is, however, a great program that allows you to take any Windows font and turn it into a GD font. You can get this program from here: http://www.wedwick.com/wftopf.exe

The fifth line of code is where PHP does the writing. It takes the image, font, X and Y coordinates, the string (your text), and finally the text color and writes on the image.

The header() is basic PHP to tell the browser what kind of content it is viewing, in this case an image.

PHP then creates the image, and destroys the temp image in memory. You should now have something like this:

Afterthoughts: You can create a form that does POST instead of GET for a bit more “security” through obsecurity.

You could use one page for all the code, but I used two to help newbies.

Download archive with project files here: php-gd.rar

Here is the script in action: http://riscit.info/dynamic_image/input.html