In the following tutorial I'll show you a peek at the power of coupling GD with PHP to create a basic button. The GD extension is more or less an addon for PHP to allow for image manipulation and creation and has to be compiled in when you compile PHP and the rest of the software. The GD extensions currently support PNG and JPEG image formats, as GIF support was removed in version 1.6 because of legalities dealing with the GIF format. (A patch is available to restore this functionality.) The following tutorial will be using PNG format images (the images on this tutorial are saved in the GIF format, and are not dynamically created. Just for compatibility's sake). In using the GD extensions, they must be compiled with PHP if using on a unix platform, or the extension php*_gd.dll must be loaded on win32 platforms. The code can get a bit complicated and I'll assume you know some basics of PHP.
Lets cut right to the code:
button.php
The coding is fairly short, for a simple button. You could visit the page directly on your web server, or call it from an IMG tag on another page, ie: <IMG SRC="http://www.yourserver.com/button.php"> The above code creates a rather bland image.
You can change the colors and even add shadowing by drawing a simple line on three sides or such. I suggest visiting php.net and looking through the functions for the GD extensions. Let's go through the code and I'll explain a bit about each function used.
The first few lines of code state the image's attributes, 100 pixels wide by 30 pixels high, the text and the font sized use to print the text.
The imagecreate() function is just that, it creates the image. The first attribute needed for the function states the width, the second states the image height. If you get a fatal error at this point in the code, it is likely that the gd extensions are not compiled on your system.
The imagecolorallocate() function allocates the specified color for use on the image. Important Note: You *must* allocate any color that you are going to use on the image before you use it. A good idea is to allocate the colors right after you create the image with imagecreate(). The first attribute needed for this function is the image identifier (the variable you used with imagecreate().). The other three attributes is the RGB hex values, red being first, green second, and blue third. If you do not know what the hex values for the colors are, you can visit http://php.net/manual/function.imagecolorallocate.php for more information about this function and the hex values.
ImageFilledRectangle() draws a filled rectangle on the image first using the image identifier (again, the variable used to create the image), the beginning x coordinate, the beginning y coordinate, the ending x coordinate, the ending y coordinate and finally the color to be used for the fill.
The above two lines are simply used to calculate the width and height of the label, so we can place it on the image centered
Again, the above two lines are simply used to state where we'll want to place the label so that its centered.
The imagestring() function prints the string, or text, on to the image. In this example we print the label twice, but "moved" over a pixel so it creates a shadow effect!
Ok, here we want to let the browser know its an image in PNG format so it displays it properly. Please note that some older browsers do not display PNG images properly or at all. This should be remembered when thinking about browser-independence, but most modern browsers correctly display the images, so not to worry! So finally, we've sent the header to the browser, now we spit out the image to the browser using imagepng()!
That's about it for this tutorial, if you have any problems figuring out the code visit php.net and use the online manual or quick reference to learn more about some of the functions you've seen today!
Lets cut right to the code:
button.php
| Code: |
| <?
$ButtonWidth = 100; $ButtonHeight = 30; $ButtonLabel = "Testing"; $ButtonFont = 5; $image = imagecreate($ButtonWidth, $ButtonHeight); $colorBody = imagecolorallocate($image, 0x99, 0x99, 0x99); $colorShadow = imagecolorallocate($image, 0x33, 0x33, 0x33); $colorHighlight = imagecolorallocate($image, 0xCC, 0xCC, 0xCC); imagefilledrectangle($image, 1, 1, $ButtonWidth-2, $ButtonHeight-2, $colorBody); //determine label size $ButtonLabelHeight = imagefontheight($ButtonFont); $ButtonLabelWidth = imagefontwidth($ButtonFont) * strlen($ButtonLabel); //determine label upper left corner $ButtonLabelX = ($ButtonWidth - $ButtonLabelWidth)/2; $ButtonLabelY = ($ButtonHeight - $ButtonLabelHeight)/2; //draw label shadow imagestring($image, $ButtonFont, $ButtonLabelX+1, $ButtonLabelY+1, $ButtonLabel, $colorShadow); //draw label imagestring($image, $ButtonFont, $ButtonLabelX, $ButtonLabelY, $ButtonLabel, $colorHighlight); //output image header("Content-type: image/png"); imagepng($image); ?> |
The coding is fairly short, for a simple button. You could visit the page directly on your web server, or call it from an IMG tag on another page, ie: <IMG SRC="http://www.yourserver.com/button.php"> The above code creates a rather bland image.
You can change the colors and even add shadowing by drawing a simple line on three sides or such. I suggest visiting php.net and looking through the functions for the GD extensions. Let's go through the code and I'll explain a bit about each function used.
The first few lines of code state the image's attributes, 100 pixels wide by 30 pixels high, the text and the font sized use to print the text.
| Code: |
| $image = imagecreate($ButtonWidth, $ButtonHeight); |
The imagecreate() function is just that, it creates the image. The first attribute needed for the function states the width, the second states the image height. If you get a fatal error at this point in the code, it is likely that the gd extensions are not compiled on your system.
| Code: |
| $colorBody = imagecolorallocate($image, 0x99, 0x99, 0x99);
$colorShadow = imagecolorallocate($image, 0x33, 0x33, 0x33); $colorHighlight = imagecolorallocate($image, 0xCC, 0xCC, 0xCC); |
The imagecolorallocate() function allocates the specified color for use on the image. Important Note: You *must* allocate any color that you are going to use on the image before you use it. A good idea is to allocate the colors right after you create the image with imagecreate(). The first attribute needed for this function is the image identifier (the variable you used with imagecreate().). The other three attributes is the RGB hex values, red being first, green second, and blue third. If you do not know what the hex values for the colors are, you can visit http://php.net/manual/function.imagecolorallocate.php for more information about this function and the hex values.
| Code: |
| imagefilledrectangle($image, 1, 1, $ButtonWidth-2, $ButtonHeight-2, $colorBody); |
ImageFilledRectangle() draws a filled rectangle on the image first using the image identifier (again, the variable used to create the image), the beginning x coordinate, the beginning y coordinate, the ending x coordinate, the ending y coordinate and finally the color to be used for the fill.
| Code: |
| $ButtonLabelHeight = imagefontheight($ButtonFont);
$ButtonLabelWidth = imagefontwidth($ButtonFont) * strlen($ButtonLabel); |
The above two lines are simply used to calculate the width and height of the label, so we can place it on the image centered
| Code: |
| $ButtonLabelX = ($ButtonWidth - $ButtonLabelWidth)/2;
$ButtonLabelY = ($ButtonHeight - $ButtonLabelHeight)/2; |
Again, the above two lines are simply used to state where we'll want to place the label so that its centered.
| Code: |
| imagestring($image, $ButtonFont, $ButtonLabelX+1, $ButtonLabelY+1, $ButtonLabel, $colorShadow);
imagestring($image, $ButtonFont, $ButtonLabelX, $ButtonLabelY, $ButtonLabel, $colorHighlight); |
The imagestring() function prints the string, or text, on to the image. In this example we print the label twice, but "moved" over a pixel so it creates a shadow effect!
| Code: |
| header("Content-type: image/png");
imagepng($image); |
Ok, here we want to let the browser know its an image in PNG format so it displays it properly. Please note that some older browsers do not display PNG images properly or at all. This should be remembered when thinking about browser-independence, but most modern browsers correctly display the images, so not to worry! So finally, we've sent the header to the browser, now we spit out the image to the browser using imagepng()!
That's about it for this tutorial, if you have any problems figuring out the code visit php.net and use the online manual or quick reference to learn more about some of the functions you've seen today!
