thirst and thrust

I mentioned a personal project I was working on in the Comet: A Primer blog entry. I hate to mentioned my personal projects since I seem to start more than I ever finish. To let the cat out of the bag, so to speak, I am working on implementing a card game in a web application. There are a number of challenges doing this in a browser and specifically within the context of HTTP.

One of the things I was working on tonight was manipulating an image, of a card, through PHP code. I was please to find that doing so did not require the addition of a library. Installations of PHP v5 has v2.x of the GD library bundled with the PHP installation. GD is an open source code library for the dynamic creation of images.

The first thing I had to do was verify that my host had GD enabled by creating a PHP file with the code below and placing it on the server and browsing to the file.

1
2
3
4
5
6
7
8
9
10

$array=gd_info ();
foreach ($array as $key=>$val) {
   if ($val===true) {
      $val="Enabled";
   } 
   if ($val===false) {
      $val="Disabled";
   }
   echo "$key: $val <br />\n";
}

It told me that GD was enabled and what types of image files it was configured to work with. First off I wanted to work with an existing image versus creating one from scratch (which either is possible). I created a stock card image (pictured below) to work with.

What I wanted to with this stock image was to add text to it. With the GD library the way to this is with the function imagestring. I created a simple class to manipulate the image, keep in mind this class is very much in sandbox mode and does not represent the final implementation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

class ManipulateGifImage {
 
	var $filename = '';
	var $fileObj = null;
 
	function setFile($file) {
		$this->filename = $file;
		$this->fileObj = @imagecreatefromgif($this->filename) or die ($errmsg);
	}
 
	// add text
	function addText($textToAdd,$position=0) {
 
		$strArray = explode(' ',$textToAdd);
 
		$str = '';
		$len = 0;
		$linepos = $position + 40;
		foreach($strArray as $word) {
			$len += strlen($word) + 1;
			if($len <=27) {
				$str .= $word . ' ';
			} else {
				imagestring($this->fileObj,2,10,$linepos,$str,imagecolorallocate($this->fileObj,0,0,0));
				$linepos += 10;
				$str = $word . ' ';
				$len = strlen($word) + 1;
			}
		}
		imagestring($this->fileObj,2,10,$linepos,$str,imagecolorallocate($this->fileObj,0,0,0));
	}
}

Using this class I was able to manipulate the image. You will notice that the addText function has logic for writing out lines of specific length and then moving the position to add the rest of the text on a new line position. This was done so the longer text could be added to the image by wrapping it in the image versus letting it fall off the edge.

To use this class I added the following code to the PHP file that displayed the manipulated image in the browser.

1
2
3
4
5
6
7
8
9
10
11
12

// file type
header("Content-type: image/gif");
 
$imageManip = new ManipulateGifImage();
$filename = 'images/card_front.gif';
$imageManip->setFile($filename);
 
$imageManip->addText('This is some text that shows up on the card. I am testing managing wrapping words and that is the reason this text is so long.');
 
imagegif($imageManip->fileObj);
 
imagedestroy($imageManip->fileObj);

The imagegif function streams the image object to the browser. Also notice that I set the headers content type so the browser would know what to do with the streamed image. I also followed that with imagedestroy to free the servers memory used for holding the image object.

Here is the resulting image:

Not hard. I have a long way to go with manipulating the images for the card game but this was a pretty straight forward proof of concept.

Share on Facebook