| Creating images on the fly can be a very useful skill. PHP has some built-in image generation functions, further more, to generate new images or edit existing images on the fly using PHP, we need to have the GD library installed. In this tutorial we will show you how to get quite interesting and useful effects using image handling functions. We will review two practical tasks: creating security images (captcha) on the fly and building a bar chart using numerical values retrieved from MySQL database. Creating security images on the fly At first, have a look at the following script that creates captcha image. Next, we will consider each step of image generation in details.
create_image();
exit();
function create_image()
{
$md5 = md5(rand(0,999));
$pass = substr($md5, 10, 5);
$width = 100;
$height = 20;
$image = ImageCreate($width, $height);
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
$grey = ImageColorAllocate($image, 204, 204, 204);
ImageFill($image, 0, 0, $black);
ImageString($image, 3, 30, 3, $pass, $white);
ImageRectangle($image,0,0,$width-1,$height-1,$grey);
imageline($image, 0, $height/2, $width, $height/2, $grey);
imageline($image, $width/2, 0, $width/2, $height, $grey);
header("Content-Type: image/jpeg");
ImageJpeg($image);
ImageDestroy($image);
}
?>
To create a new image or edit an existing one, we need to create image identifier. In the preceding example we created an empty canvas by calling ImageCreate() function, passing it width and height of a new image as a parameters. Another way to do it is to read the existing image from the file. Depending on the file format you can do it using one of the following functions: ImageCreateFromPNG(), ImageCreateFromGIF(), ImageCreateFromJPEG(). Parameter of each function is a file name. Then, we need to choose colors to be used while painting. For this we can use ImageColorAllocate() function and image identifiers for red, green, and blue (RGB) components of necessary color will be passed as parameters. On the next step, we will generate our image. First, using ImageFill() function we will create black background. Parameters of this function are: image identifier, initial coordinates of the area to be filled and fill color. Then, we will use ImageString() function to add text to the image. Its parameters are – image identifier, font, coordinates for the first text position and text color. Finally, we will draw two lines and a rectangular to protect our image a little bit. Please note, that the final point of the rectangular has the following coordinates: $width-1 and $height-1. If they were equal to $width and $height, than the rectangular would have exceeded canvas frame. When we had created the image, we can output it either to a browser, or to a file. Our example shows how to output it to the browser. We need to inform the browser, that we will output the image, not the text or html-code. To do it, call Header() function, setting image MIME-type. It’s worth mentioning that Header() function can not be executed if HTTP header has already been sent. After sending the header we can output our image using ImageJpeg() function, passing it image identifier as a parameter. When we have finished working with the image we need to free up resources using ImageDestroy() function.  Back to top
Building a bar chart In the example below, using graphic functions we will build a bar chart based on the values stored in MySQL database. In our case, values represent poll results. In this example we will use poll database. To create it run the following SQL script in your MySQL server: CREATE DATABASE `poll`;
USE poll;
CREATE TABLE `results` (
book_type VARCHAR(50),
num_votes INT
);
INSERT INTO `results` values
('Classic', 15),
('Fantasy', 7),
('Humor', 32),
('Mystery', 12),
('Poetry', 25); Script building a bar chart is quite long, so let's divide it into two parts and discuss them separately. The first part of the script connects to MySQL database and requests data that will be represented in the bar chart.
$dbhandle = mysql_connect("localhost", "root", "")
or die("Unable to connect to MySQL");
$selected = mysql_select_db("poll",$dbhandle)
or die("Could not select examples");
$result = mysql_query("SELECT * FROM results");
$num_poller = mysql_num_rows($result);
$total_votes = 0;
while ($row = mysql_fetch_array($result)) {
$total_votes += $row{'num_votes'};
}
mysql_data_seek($result,0);
mysql_close($dbhandle);
In the second part of the script first of all we will calculate variables needed to build the chart. Then, we prepare primary image and actually output data. Results for each genre are picked from the database one by one, percentage of votes is calculated, and then bars and explanatory notes are outputted. In this script we are using TrueType fonts to get anti-aliased text. Functions that work with the TrueType fonts have its own peculiarities. First, you need to point where the fonts are located. For this, system variable GDFONTPATH is set. Then, we need to set the font name. TrueType fonts are rendered using ImageTTFText(). We have already discussed above all functions used for drawing, the code has been commented and is quite clear, so you shouldn’t have any trouble.
putenv('GDFONTPATH=C:\WINDOWS\Fonts');
$font = 'arial';
$y = 50;
$width = 700;
$bar_height = 20;
$height = $num_poller * $bar_height * 1.5 + 70;
$bar_unit = ($width - 400) / 100;
$image = ImageCreate($width, $height);
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
$red = ImageColorAllocate($image, 255, 0, 0);
$blue = imagecolorallocate($image,0,0,255);
ImageFill($image,$width,$height,$white);
ImageRectangle($image, 0, 0, $width-1, $height-1, $black);
ImageTTFText($image, 16, 0, $width/3 + 50, $y - 20, $black, $font, 'Poll Results');
while ($row = mysql_fetch_object($result)) {
if ($total_votes > 0)
$percent = intval(round(($row->num_votes/$total_votes)*100));
else
$percent = 0;
ImageTTFText($image,12,0,10, $y+($bar_height/2), $black, $font, $row->book_type);
ImageTTFText($image, 12, 0, 170, $y + ($bar_height/2),$red,$font,$percent.'%');
$bar_length = $percent * $bar_unit;
ImageRectangle($image, $bar_length+221, $y-2, (220+(100*$bar_unit)), $y+$bar_height, $black);
ImageFilledRectangle($image,220,$y-2,220+$bar_length, $y+$bar_height, $blue);
ImageTTFText($image, 12, 0, 250+100*$bar_unit, $y+($bar_height/2), $black, $font, $row->num_votes.' votes cast.');
$y = $y + ($bar_height * 1.5);
}
header("Content-Type: image/jpeg");
ImageJpeg($image);
ImageDestroy($image);
?>
Back to top Using dynamically generated images on the other pages Since the header can be sent only once and it is the only way to tell the browser that you are going to send image, it is not so easy to insert automatically generated images to the regular pages. There are three ways to do it: - The whole page can consist of the image.
- You can save image in the file and then refer to it using
![]() HTML descriptor. - You can put a script producing image in HTML descriptor, e.g.:
Related Articles  How to connect to MySQL database using PHP
Back to top |
dzone
digg 
del.icio.us
stumbleupon![[RSS]](http://www.webcheatsheet.com/images/feed-icon16x16.png "Subscribe")
