Untitled

Documentation sur les fonctions graphiques de la bibliothèque GD de PHP

PHP provides a comprehensive range of image functions. This article examines how we can load existing images as templates, create images through PHP itself, and create transparency in images. We also look at tiling in PHP. The end of the article contains a reference section for all the functions used.

Loading images and changing colors

<?php
$image=imageCreateFromPNG("porsche.png");
$back=imageColorAt($image,10,10);
imageColorSet($image,$back,255,0,255);
imagePNG($image);
imageDestroy($image);
?>

First, this code loads the porsche.png image into memory. This does not display the image in the client’s browser. To do this we call imagePNG(), and pass the virtual image as a parameter. Finally, the virtual image is destroyed, with the imageDestroy() function.

As we have created a virtual image, we can manipulate this before we decide to display it. This has numerous very useful applications, for example images can be displayed using different colors, but only one basic image is needed.

The rest of the code does this. First, we get the background color of the Porsche image. This color is referenced by a palette index, and by calling;

$back=imageColorAt($image,10,10);

we store the palette index of the color at (10,10) in the Porsche image in the $back variable.

The next line:

imageColorSet($image,$back,255,0,255);

changes the color at that palette index to our new purple color. When the image is displayed, the background is now purple.

Creating Images

<?php

$image=imageCreate(80,40);

$black=imageColorAllocate($image,0,0,0);
$gray=imageColorAllocate($image,153,153,153);
$red=imageColorAllocate($image,255,0,0);

imageFilledRectangle($image,0,0,80,40,$black);
imageFilledRectangle($image,5,5,75,35,$gray);

for ($i=1;$i<10;$i++)
for ($j=1;$j<$i;$j++)
imageSetPixel($image,35-$i*3,$j*3+4,$red);

imagePNG($image);
imageDestroy($image);
?>

It is not necessary to build and display an image from a prepared image. PHP allows us to create virtual images from scratch, and has a fairly comprehensive graphics library to perform this task.

Here we create a virtual image of width 80 pixels, and height 40 pixels. Three color constants are defined, and then the border is created. The border is black, the main substance of the button is gray.

The imageSetPixel() function allows individual pixels to be set, and this code creates a red triangle made from dots.

Again, imagePNG() displays the image, and imageDestroy() destroys the virtual image.

Transparency

<?php
$image=imageCreate(80,40);

$white=imageColorAllocate($image,255,255,255);
$red=imageColorAllocate($image,255,0,0);
$green=imageColorAllocate($image,0,255,0);
$black=imageColorAllocate($image,0,0,0);

imageColorTransparent($image, $white);
imageFilledRectangle($image,0,0,80,40,$white);

if ($HTTP_GET_VARS['color']=='red')
imageArc($image,20,20,32,32,120,0, $red);
else imageArc($image,20,20,32,32,120,0, $green);

imageString($image,5,20,20,$HTTP_GET_VARS['text'], $black);

imagePNG($image);
imageDestroy($image);
?>

HTML

<html>
<body style="background-image:url('lightWood.png')">
<img src="transparency.php?text=home&color=red"
onmouseover="this.src='transparency.php?text=home&color=green';"
onmouseout="this.src='transparency.php?text=home&color=red';"
>
<img src="transparency.php?text=about&color=red"
onmouseover="this.src='transparency.php?text=about&color=green';"
onmouseout="this.src='transparency.php?text=about&color=red';"
>
<img src="transparency.php?text=products&color=red"
onmouseover="this.src='transparency.php?text=products&color=green';"
onmouseout="this.src='transparency.php?text=products&color=red';"
>
</body>
</html>

Transparent images are very useful when we need to present professional looking graphics. They can merge with the background, and remove the ‘square-ness’ of the basic image structure.

This code creates a rollover button entirely in PHP. The button is completely generic, i.e. it can be used over and over again, and we only need to change the text in the corresponding HTML.

imageColorTransparent($image, $white);

This line sets white to be the transparent color for the image.

imageFilledRectangle($image,0,0,80,40,$white);

This line then creates an entirely transparent background for the button.

The PHP is called from the HTML by;

<img src="transparency.php?text=home&color=red"

This passes two parameters to the PHP, text and color. The PHP code processes first the color parameter, and draws an arc is the specified color.

Next, the text for the button is set, and then the final image is displayed and destroyed.

The feature can be used in connection with event handlers – in the HTML code this;

<img src="transparency.php?text=products&color=red"
onmouseover="this.src='transparency.php?text=products&color=green';"
onmouseout="this.src='transparency.php?text=products&color=red';"
>

results in a button that changes the arc color whenever a mouse is moved on or off the image.

Tiling

<?php
$image=imageCreate(200,200);

$tile1=imageCreateFromPNG('tile1.png');
$tile2=imageCreateFromPNG('tile2.png');
imageSetTile($image,$tile1);
imageFilledRectangle($image,0,0,200,200,IMG_COLOR_TILED);

$polygon=array(10,10,190,100,10,190,100,100,10,10);
imageSetTile($image,$tile2);
imageFilledPolygon($image,$polygon,5,IMG_COLOR_TILED);

imagePNG($image);
imageDestroy($image);
?>

This example demonstrates the flexibility of the PHP Graphics Library, and the use of tiles. A tile is an image that is repeated. This allows for textures to be created. A tile is used when a function that involves filling is used, for example, imageFilledRectangle() and imageFilledPolygon().

To set the IMG_COLOR_TILED special color, the imageSetTile() function is called, with the image that we are working on as the first parameter, and the tile image as the second. Once this function has been successfully called, the IMG_COLOR_TILED property stores this tile image, and when a fill function is called using this color, the fill pattern is the tile image.

This can be used to create very effective graphics. This example then uses the imageFilledPolygon() function to create an arrow, again tiled, but with a different tile.

Reference

imageCreate(int width, int height)

Creates a virtual image of dimensions width by height. Returns an image resource.

imageDestroy(resource image)

Destroys a virtual image.

imageCreateFromPNG(string filename)

Creates a PNG image from a URL. Returns an image resource.

imagePNG(resource image)

Displays a PNG image.

imageColorAllocate(resource image, int red, int green, int blue)

Assigns the new color to the palette of a virtual image.

imageColorAt(resource image, int x, int y)

Returns the color at a pixel from a virtual image.

imageColorSet(resource image, int index, int red, int green, int blue)

Sets the color at a palette index to a new color.

imageColorTransparent(resource image, int color)

Sets the color to be the transparent color for the image.

imageArc(resource image, int cx, int cy, int width, int height, int start, int end, int color)

Draws an arc, centered at cx,cy, with the defined width and height, in the defined color. The arc starts at the start angle, and ends at the end angle. The angles are measured in degrees, and begin from the positive x-axis and go clockwise.

imageFilledPolygon(resource image, array points, int num, int color)

Draws and fills a polygon from the array of points.

imageFilledRectangle(resource image, int top, int left, int bottom, int right)

Draws and fills a rectangle.

imageSetPixel(resource image, int x, int y, int color)

Sets the color of a single pixel.

imageSetTile(resource image, int tile)

Sets the tile for an image. Using this function sets the IMG_COLOR_TILED property to the value of tile.

imageString(resource image, int font, int x, int y, string text, int color)

Adds text to an image. Font can be 1-5.

This article has covered most of the common PHP graphic functions. With these functions we can create any number of images, and create new images from old.

The source code for this article can be downloaded from here.