FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


[TUTOR] A Short Intro to GD





toplez
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
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!
Related topics
GD-library header probs
GD Installé ou pas ???
Complete Tutorial LINKS for every language
Will Pay 60 Frihs for an Excellent Flash Intro to my site.
PHP Tutorials
flash intro movie
Yet another newbie posting
kgcole
Back from darkness, my humble short apology.
Intro
My intro
A Blog That Lies - Really!!
Using After Effects
Delphi Systems - Lethbridge Tech & IT Support
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.