Pages

Your Ad Here

This Blog is not to read or go through

because, I have never been such a mess


Search the blog instead

Saturday, December 22, 2007

PHP: Dynamic Image Generation

PHP: Dynamic Image Generation Print Email

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.

//Send a generated image to the browser
create_image();
exit();

function create_image()
{
//Let's generate a totally random string using md5
$md5 = md5(rand(0,999));
//We don't need a 32 character long string so we trim it down to 5
$pass = substr($md5, 10, 5);

//Set the image width and height
$width = 100;
$height = 20;

//Create the image resource

$image = ImageCreate($width, $height);

//We are making three colors, white, black and gray
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
$grey = ImageColorAllocate($image, 204, 204, 204);

//Make the background black
ImageFill($image, 0, 0, $black);

//Add randomly generated string in white to the image
ImageString($image, 3, 30, 3, $pass, $white);

//Throw in some lines to make it a little bit harder for any bots to break
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);

//Tell the browser what kind of file is come in
header("Content-Type: image/jpeg");

//Output the newly created image in jpeg format
ImageJpeg($image);

//Free up resources
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.

//Querying the database to get poll results

//connection to the database
$dbhandle = mysql_connect("localhost", "root", "")
or die("Unable to connect to MySQL");

//select a database to work with
$selected = mysql_select_db("poll",$dbhandle)
or die("Could not select examples");

//execute the SQL query and return records
$result = mysql_query("SELECT * FROM results");

$num_poller = mysql_num_rows($result);
$total_votes = 0;

//fetch the data from the database
while ($row = mysql_fetch_array($result)) {
$total_votes += $row{'num_votes'}; //calculating total number of votes
}

//nulling the pointer $result
mysql_data_seek($result,0);

//close the connection
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.

//Tell gd2, where your fonts reside
putenv('GDFONTPATH=C:\WINDOWS\Fonts');
$font = 'arial';

//Set starting point for drawing
$y = 50;

//Specify constant values
$width = 700; //Image width in pixels
$bar_height = 20; //Bars height
$height = $num_poller * $bar_height * 1.5 + 70; //Calculating image height
$bar_unit = ($width - 400) / 100; //Distance on the bar chart standing for 1 unit

//Create the image resource
$image = ImageCreate($width, $height);

//We are making four colors, white, black, blue and red
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
$red = ImageColorAllocate($image, 255, 0, 0);
$blue = imagecolorallocate($image,0,0,255);

//Create image background
ImageFill($image,$width,$height,$white);
//Draw background shape
ImageRectangle($image, 0, 0, $width-1, $height-1, $black);
//Output header
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;

//Output header for a particular value
ImageTTFText($image,12,0,10, $y+($bar_height/2), $black, $font, $row->book_type);
//Output percentage for a particular value
ImageTTFText($image, 12, 0, 170, $y + ($bar_height/2),$red,$font,$percent.'%');

$bar_length = $percent * $bar_unit;

//Draw a shape that corresponds to 100%
ImageRectangle($image, $bar_length+221, $y-2, (220+(100*$bar_unit)), $y+$bar_height, $black);
//Output a bar for a particular value
ImageFilledRectangle($image,220,$y-2,220+$bar_length, $y+$bar_height, $blue);
//Output the number of votes
ImageTTFText($image, 12, 0, 250+100*$bar_unit, $y+($bar_height/2), $black, $font, $row->num_votes.' votes cast.');

//Going down to the next bar
$y = $y + ($bar_height * 1.5);

}

//Tell the browser what kind of file is come in
header("Content-Type: image/jpeg");

//Output the newly created image in jpeg format
ImageJpeg($image);

//Free up resources
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.:
Dynamically generated image

Related Articles

How to connect to MySQL database using PHP

Back to top

Tags: DYNAMIC IMAGE GENERATION GD CAPTCHA GRAPH STORE CACHE

Add To: Add to dzone dzone | Digg this digg | Add to del.icio.us del.icio.us | Stumble it stumbleupon


Hide Comments | Add New
Thank you for really useful tutorial!
# Posted by noizze | 27 Nov 2006 05:26:34
Very well written, thank you for the tip with putting the image in a html descriptor.
# Posted by fips | 2 Jan 2007 20:45:34
Great tutorial for the captcha, but it lacks the mechanism on how to tell the server to store and validate the security code against the user's input.
# Posted by OJ | 10 Jan 2007 22:33:04
Hello Sir It's REALLY useful, But i cannot use it.

Becoz the functions here referred is not identified in my PHP. So pls help to Configure it in WAMP 1.4 . Pls any body know it,pls mail me with details,

Thanks alot ....
# Posted by Anes P.A | 14 Jan 2007 22:39:47
Check your PHP and GD version first.
Use the latest stable version.
# Posted by JOKERz | 26 Jan 2007 04:55:19
thanx! very simple yet usable code... it is really easy to understand...
# Posted by smiley_sheinnize | 20 Feb 2007 22:17:00
how can i create pie chart using this code pls send me one example source code.
# Posted by bhavu_tailor | 10 Mar 2007 03:11:35
This Tutorial Worked For Me! Thanks For That!

To Make Charts, However, I Use The PHP/SWF Charts Found Here: http://www.maani.us/charts/index.php. I Try To Add In One Or Two Of Those Into Every Backend I Create. It Really Makes The Admin Go, "Wow!" Every Time.
# Posted by Rick Clark | 20 Mar 2007 15:19:08
sir,
when i run this program,
i got an error
Warning: imagettftext() [function.imagettftext]: Could not find/open font
how to find it in my php.ini file

im using WAMP5 1.6.6 version.
i went to php.ini file and uncommented php_gd2.dll to enable gd
and also commented to generate images dynamically.
;tidy.clean_output = Off

this tutorial is very useful for me.
# Posted by nalini | 22 Mar 2007 22:39:28
If you get "Warning: imagettftext() [function.imagettftext]: Could not find/open font" One easy fix is to simply copy the font file (i.e., arial.ttf), and paste it directly in the same folder as your PHP file. With Windows, the arial.ttf font file is typically located in C:\WINDOWS\Fonts\arial.ttf. There are, of course, other solutions.
# Posted by Geri | 28 Mar 2007 10:09:07
Very nice code .. It is usefull
# Posted by vinoth | 16 Apr 2007 21:54:40
Thanks for your help, I have implemented it in one of my projects : vk-systems.com for image validation.
# Posted by kapinder | 11 May 2007 00:50:05
Good morning everyone,

I am stuck on this problem - I need to know how to deal with this issue - what I am trying to do is modify the original image's size and location, while keeping it's physical size. For example, a 200X200 image of a cat will be resized by $percent, BUT be imagecopyresampled() into an image of the same size as the original, or 200X200. This is necessary for my project. So, my problem is that, when imagecopyresampled() at 98%, the image actually looks like it is resampled at 102%. Can someone please tell me what I've done wrong?

Thank you!


if (isset($_GET['image'])) {
move_save_image($_GET['image'], $_GET['x'], $_GET['y'], $_GET['percent']);
}
else {
echo "Could not load image";
}

function move_save_image($image, $x=0, $y=0, $percent=100) {

$image_withpath = "../dynproducts/dynimages/" .$image;

if (file_exists($image_withpath)) {
header('content-type: image/jpeg');

$modified = imagecreatefromjpeg($image_withpath);
$modified_size = getimagesize($image_withpath);

$width = $percent / 100 * $modified_size[0];
$height = $percent / 100 * $modified_size[1];

$visible_image = imagecreatetruecolor($width, $height);

$dest_x = $x;
$dest_y = $y;
$dest_a = $x * -1;
$dest_b = $y * -1;

imagecopyresampled($visible_image, $modified, 0, 0, $dest_a, $dest_b, $modified_size[0],$modified_size[1], $width, $height);

imagejpeg($visible_image, '', 80);

imagedestroy($visible_image);
imagedestroy($modified);
}
else {
echo "File does not exist.";
}

}
# Posted by Derge | 1 Jun 2007 06:05:22
hello webcheatsheet!

you php notes very useful and easy to understanding.please send quiz program using php
# Posted by anitha | 26 Sep 2007 08:26:34
It's REALLY useful
can i use different color for each Strip?
and how i can create image for vertical graph

thx
# Posted by pankaj | 23 Nov 2007 05:57:51
Very good code
thank you

No comments:

Your Ad Here