something about PHP's image future[原创]

today,i have seen a new fangled question. http://community.csdn.net/Expert/TopicView1.asp?id=3382782
hoho,so many high PHP fans,they r use their imaginations.But i think the client's realization isn't useful.But some site really need a server-side class or framework.but it is not common requirement.
but i have thought about the way to make it real.of course we need tu use GD.it is the same way as we use GD to generate a image  painted by some numbers to authenticate user.But we need to do more more ...more work than that.we must anylist all XHTML tags and their attributes.and then,we must do like DreamWeaver,paint the image according to the page's layerout.the function we developed can read the XHTML and paint it.hoho,what a pretty tool.someone  is interested ?but we still should know sth about GD.now,i will show a simple but useful example to introduce our star---GD!
refernece from: http://www.developerfusion.com/show/1951/1/

PHP, or PHP Hypertext Pre-processor, is one of the most popular scripting languages available to web developers. There are many reasons why PHP is now the most popular server-side scripting language for the Apache web server. Firstly, it supports database connectivity to a huge number of popular vendors, including Microsoft, Oracle and IBM. Secondly, with the correct libraries installed, PHP also supports real-time generation of images, PDF files, and even shockwave movie files! The only limit that bounds us when we’re developing with PHP is our imagination.

For developers like myself, one of the most popular features of PHP is real-time image generation. That is, we can create a new image canvas, “paint” it, and either save it to a file, or send it directly to the browser. In this article, I will show you how to create an image in real-time with PHP. The image will be similar to the ones used on yahoo.com and paypal.com, where a random number is generated inside of an image. That image is displayed in the browser, and you have to enter that random number into a text box to create a new account. This is a method that is becoming more popular, and it’s used to stop people from generating multiple user accounts in one go, which, is some cases, can crash the web server(s). 

To generate images in real-time using PHP, we need to have the GD library installed. To make sure you have the GD library installed, create a new PHP page named checkgd.php in a directory on your web server. Enter the following code into checkgd.php:

<?php
phpinfo(INFO_MODULES);
?>

Run the checkgd.php page on your web server. If you can find a section for the GD library (like in the sample shown below), then you have the GD library installed and ready to go:

On the other hand, if you don't see a section for the GD library, then you will need to download and install the GD library. If you are running windows, then installation instructions are available here. If you are running Linux, installation instructions are available here.

Both of the links to installation instructions shown above use an older version of the GD library. This is because with the newer versions, any support for GIF images has been removed due to copyright infringements.

As mentioned at the beginning of this article, we will be creating an image that contains a random number, similar to the methods used by yahoo.com and paypal.com when you register to become a member.

So, now that we have the GD library installed as part of our PHP distribution, let's jump right in and create our first image. 

The first step to creating our image is to create a canvas to work with. We do this by using the imagecreate function, as shown below:

<?php

$img_number = imagecreate(100, 50);

?>

The imagecreate function creates a blank canvas. The width and height of the canvas are determined by the two parameters passed to the function respectively. So, in our example above, we have created a new image that is 100 pixels wide, by 50 pixels high.

The next step is to allocate the colours that will be used to generate our random number image. We use the imagecolorallocate function to do this. The imagecolorallocate function takes four arguments. The first is the image identifier, which in our case is $img_number. The last three arguments specify the RGB values of the colour that we are creating. RGB (red, green and blue) values range from 0 (the darkest) to 255 (the lightest). For example, black is 0, 0, 0 and white is 255, 255, 255. Let's create a couple of colours:

<?php

$img_number = imagecreate(100,50);
$white = imagecolorallocate($img_number,255,255,255);
$black = imagecolorallocate($img_number,0,0,0);
$grey_shade = imagecolorallocate($img_number,204,204,204);

?>

As you can see, we have created three new colour-allocated variables: $white, $black and $grey_shade. These will be used to create the different shapes and text for our image.

Now that we know how to allocate colours, why don't we add a rectangle or two to our image canvas?

<?php

$img_number = imagecreate(100,50);
$white = imagecolorallocate($img_number,255,255,255);
$black = imagecolorallocate($img_number,0,0,0);
$grey_shade = imagecolorallocate($img_number,204,204,204);

imagefill($img_number,0,0,$grey_shade);
ImageRectangle($img_number,5,5,94,44,$black);
ImageRectangle($img_number,0,0,99,49,$black);

?>

The imagefill function performs a complete fill of the canvas identified by the first argument, $img_number. Arguments two and three specify the x and y co-ordinates to start filling from. The last parameter is a variable created using the imagecolorallocate function.

Next, we draw two rectangles using the ImageRectangle function. The first argument to the ImageRectangle is a reference to a drawing canvas created using the imagecreate function. The next four arguments specify the top left-hand corner of the rectangle, as well as the lower right-hand corner. The last parameter is a reference to a colour, created using the imagecolorallocate function.

In our example, we have created a new image canvas, filled our canvas, and added some rectangles, but where is the image you might ask? Good question. At this point in time, our image is still stored in memory. It's really quite easy to display the image in a web browser, so let's do that now!!
 

Displaying our image in a web browser is a synch, and takes just two easy steps:

Telling the browser that we are outputting an image, and not the default HTML content type
Creating the actual image
Firstly, let me explain why we need to change the content type of our PHP script. By default, PHP is configured to send HTML output to the browser. The web server does this by sending a content-type = text/html header along with your HTML code. This tells the browser that it will be receiving HTML, and to process anything that comes from the server as pure HTML. Nothing else.

In our example, we don't want the browser to treat our page as HTML, because it doesn't contain any. Our page will simply spit out the results of our new image. We want the browser to render our image as a standard JPEG image file, so we change the content type using the header function, like this:

header("Content-type: image/jpeg");

This line MUST be placed right at the top of your PHP script, before any output occurs for it to work correctly. There can be no spaces before this line, and it must be enclosed with the PHP <?php and ?> tags respectively.

Secondly, we will want to actually output our image to the web browser. We can do this by using the imagejpeg function. The imagejpeg function simply takes one parameter, which is a reference to an image canvas created using the imagecreate function:

imagejpeg($img_number);

So, just to recap, our complete image generation script is shown below. Create a new file named random_number.php. Copy the code shown below into random_number.php and run the script from your web browser.

<?php

//random_number.php
$img_number = imagecreate(100,50);
$white = imagecolorallocate($img_number,255,255,255);
$black = imagecolorallocate($img_number,0,0,0);
$grey_shade = imagecolorallocate($img_number,204,204,204);

imagefill($img_number,0,0,$grey_shade);
ImageRectangle($img_number,5,5,94,44,$black);
ImageRectangle($img_number,0,0,99,49,$black);

header("Content-type:image/jpeg");
imagejpeg($img_number);

?>

When you run random_number.php from within your web browser, you should see a simple rectangle, like the one shown below:

If you don't see the rectangle in your browser, or if any errors occur, then make sure you have copied the code shown above exactly as it appears. Also, make sure there is no white space before the first <?php tag.

Now that we've got our basic image out of the way, let's actually generate a random number to display as part of our image. 

Generating our random number is very easy. We will simply create a function named get_random which will return a random number between 1 and the built-in PHP function, getrandmax(). Getrandmax() is an implementation specific function, and returns the largest seed value available on the current system. Our get_random function looks like this:

function get_random()
{
    srand(time());
    $max = getrandmax();
    return rand(1,$max) + rand(1,$max) ;
}

To actually place any piece of textual data onto our image, we use the imagestring function. The imagestring function takes six parameters, as shown below:

int imagestring (int im, int font, int x, int y, string s, int col)

im: A reference to an image canvas created using the imagecreate function
font: An integer value specifying the number of the font to draw the text in. If font is 1, 2, 3, 4 or 5, then a built-in font is used
x: The horizontal displacement from the left of the image where the text will be drawn from, measured in pixels.
y: The vertical displacement from the top of the image where the text will be drawn from, measured in pixels.
s: The text to be drawn on the image
col: The color that the text will be painted. A reference to a color created using the imagecolorallocate function.

The following code will use our get_random function to generate a random number. It will also use the imagestring function to draw that number onto our image canvas:

$number = get_random();
Imagestring($img_number,9,30,15,$number,$black);

For your convenience, the complete PHP script to generate our image containing a random number is shown below:

<?php

//random_number.php
$img_number = imagecreate(100,50);
$white = imagecolorallocate($img_number,255,255,255);
$black = imagecolorallocate($img_number,0,0,0);
$grey_shade = imagecolorallocate($img_number,204,204,204);

imagefill($img_number,0,0,$grey_shade);
ImageRectangle($img_number,5,5,94,44,$black);
ImageRectangle($img_number,0,0,99,49,$black);


$number = get_random();
Imagestring($img_number,9,30,15,$number,$black);

header("Content-type: image/jpeg");
imagejpeg($img_number);

function get_random()
{
    srand(time());
    $max = getrandmax();
    return rand(1,$max) + rand(1,$max) ;
}

?>

Copy the code shown above into random_numer.php, save the file, and load it into your web browser. You should be presented with an image similar to the one below (remember that we are using a random number, so yours will be different to mine):

Actually displaying the image as part of a HTML page is simple. Instead of specifying the src attribute of an image as a filename, you specify the name of our PHP script, like this:

<img src="random_number.php">

When the browser loads this image, it will call the random_number.php script, which would return our image as a stream of binary data. The browser would then write this binary data to the screen as the image.

One last thing I will discuss in this article is changing the font of the random number as it appears in our image. This step is optional, but demonstrates the flexibility of PHP and the GD library. 

Changing the font of our random number

To control the look and style attributes of our random number, we can replace the imagestring function with the imagettftext function, which lets us control some of the aspects of the font used to render the text.

The imagettftext function takes eight arguments, as described below:

array Imagettftext (int im, int size, int angle, int x, int y, int col, string fontfile, string text)

im: A reference to an image canvas created using the imagecreate function
size: The height of the font, in pixels
angle: The rotation of the font. Use 0 for standard horizontal display
x: The starting x co-ordinate of where the text will be drawn
y: The starting y co-ordinate of where the text will be drawn
col: A reference to a color created using the imagecolorallocate function
fontfile: The path and filename to the font that the text will be rendered in (more on this in a minute)
text: The actual string of text to be drawn

So, for our example, we would used the imagettftext function instead of the imagestring function, like this:

Imagettftext($img_number, 30,0,10,33,$black,'trebuchet.ttf',$number);

Notice the seventh argument? It's the location of the true-type font file that will be used to render our text onto the image. In our example, the file trebuchet.ttf is in the same directory as our script. Trebuchet.ttf is contained in the support material at the end of this article.

The Imagettftext file uses the FreeType font support, which is built-in to all of the latest releases of the GD image library. You can read more about the FreeType project here.

Once you have saved the random_number.php file with the new Imagettftext function instead of the imagestriing function, reload the page in your browser. You should see something like this: