The Image Creation Capabilities of PHP

PHP image functions will allow you to create images dynamically

"The format of images you are able to manipulate depend on the version of GD you install, and any other libraries GD might need to access those image formats. Versions of GD older than gd-1.6 support gif format images, and do not support png, where versions greater than gd-1.6 support png, not gif." -- From the PHP Manual: Image Functions

GD is the "GD Graphics Library; an ANSI C library for the dynamic creation of images." GD creates PNG, JPEG, and xpm images. ** Gif is "Only supported in GD versions older than gd-1.6 and newer than gd-2.0.28."

Process of creating an image
Creating a Header
allocating an image
drawing in the allocated space
send the picture data to the browser

Creating a Header

Telling the browser what kind of image it will render should be the first thing your PHP program does.

PHP allows you to change the content type field in the header with the header() function.

header("Content-type: image/jpeg"); // mark the following content as JPEG image
header("Content-type: application/png"); // mark the following content as PNG file
header("Content-type: application/gif"); // mark the following content as GIF file

Allocating an image

Allocating an image is done using GD's ImageCreate() function. As parameters this function takes the image width and height in pixels, the return value consists of a handle that you require to refer to this allocated image when doing further drawing (or similar) operations.

imagecreate -- Create a new palette based image
imagecreate ( int x_size, int y_size)

Drawing in the allocated space

After allocating an image, you must allocate colors. Tell GD all the colors that will be used to generate the image.

imagecolorallocate -- Allocate a color for an image
imagecolorallocate ( resource image, int red, int green, int blue)

Red, green and blue are the values of the red, green and blue component of the requested color respectively. These parameters are integers between 0 and 255. imagecolorallocate() must be called to create each color that is to be used in the image represented by image.

Note: The first color allocated will be the default color of the image.

imagefill -- Flood fill
int imagefill ( resource image, int x, int y, int col)

imagefill() performs a flood fill starting at coordinate x, y (top left is 0, 0) with
color col in the image image.

imagefilltoborder -- Flood fill to specific color
int imagefilltoborder ( resource image, int x, int y, int border, int col)

imagefilltoborder() performs a flood fill whose border color is defined by border.
The starting point for the fill is x, y (top left is 0, 0) and the region is filled
with color col.

Send the picture data to the browser

The picture is sent to the browser with a call to the appropriate function based on the type of image it is.

imageJPEG -- Output JPEG image to browser or file
int imageJPEG ( resource image [, string filename [, int quality]])

imageJPEG() creates the JPEG file of filename from the image image.

imageGIF -- Output GIF image to browser or file
imagePNG -- Output a PNG image to either the browser or a file
imageWBMP -- Output WBMP image to browser or file

Free up the memory used

Imagedestroy -- Destroy an image
int imagedestroy ( resource image)

Imagedestroy() frees any memory associated with image image. image is the image identifier returned by the imagecreate() function.

PHP Code:

<?php
 
Header ("Content-type: image/png");
 
$image = imagecreate(100, 100);
 
$black = imageColorAllocate($image, 0, 0, 0); // allocate color black
$blue = ImageColorAllocate ($im, 0, 0, 255);
 
// imagefill is optional since the image will automatically be created with the first
// color allocated: black. The fill covers up the black and makes the image blue.
// imageFill($image, 0, 0, 50, 50, $blue); // use it for drawing
 
ImagePng ($image);
 
// destroy the image to free memory
 
ImageDestroy ($image);
?>

The image created without fill / with fill:

Image Example: Drawing ellipses, arcs

imageellipse -- Draw an ellipse
int imageellipse ( resource image, int cx, int cy, int w, int h, int col)

imageellipse() draws an ellipse centered at cx, cy (top left is 0, 0) in
the image represented by image. W and h specifies the ellipse's width and
height respectively. The color of the ellipse is specified by color.

**Note: This function was added in PHP 4.0.6 and requires GD 2.0.2 or later.

imagefilledellipse -- Draw a filled ellipse
int imagefilledellipse ( resource image, int cx, int cy, int w, int h, int col)

imagefilledellipse() draws an ellipse centered at cx, cy (top left is 0, 0)
in the image represented by image. W and h specifies the ellipse's width and
height respectively. The ellipse is filled using color

Note: This function was added in PHP 4.0.6 and requires GD 2.0.1 or later

PHP Code:

<?php
Header("Content-type: image/jpeg");
 
$im = ImageCreate(400,400);
 
$white = ImageColorAllocate($im, 255, 255, 255);
$circleColor = imageColorAllocate($im, 0, 0, 0);
 
imagefilledellipse ($im, 250, 250, 300, 300, $circleColor);
 
ImageJpeg ($im);
 
// destroy the image to free memory
 
ImageDestroy ($im);
?>

imagearc -- Draw a partial ellipse
int imagearc ( resource image, int cx, int cy, int w, int h, int s, int e, int col)

imagearc() draws a partial ellipse centered at cx, cy (top left is 0, 0) in the image
represented by image. W and h specifies the ellipse's width and height respectively
while the start and end points are specified in degrees indicated by the s and e
arguments. 0° is located at the three-o'clock position, and the arc is drawn counter-clockwise
[from 0 - 180 then is drawn clockwise from 180 - 360]. 90 == 6 o'clock, 180=9 o'clock etc.

The user-contributed notes in the manual suggest several methods to draw a filled arc or a closed arc:
These two functions work:

PHP Code:

<?php
//To fill an arc
function uimagefilledarc($Image, $CenterX, $CenterY, $DiameterX, $DiameterY, $Start, $End, $Color) {
// To draw the arc
imagearc($Image, $CenterX, $CenterY, $DiameterX, $DiameterY, $Start, $End, $Color);
// To close the arc with 2 lines between the center and the 2 limits of the arc
$x = $CenterX + (cos(deg2rad($Start))*($DiameterX/2));
$y = $CenterY + (sin(deg2rad($Start))*($DiameterY/2));
imageline($Image, $x, $y, $CenterX, $CenterY, $Color);
$x = $CenterX + (cos(deg2rad($End))*($DiameterX/2));
$y = $CenterY + (sin(deg2rad($End))*($DiameterY/2));
imageline($Image, $x, $y, $CenterX, $CenterY, $Color);
// To fill the arc, the starting point is a point in the middle of the closed space
$x = $CenterX + (cos(deg2rad(($Start+$End)/2))*($DiameterX/4));
$y = $CenterY + (sin(deg2rad(($Start+$End)/2))*($DiameterY/4));
imagefilltoborder($Image, $x, $y, $Color, $Color);
}
?>

PHP Code:

<?php
//To close the arc with 2 lines
function uimagenofilledarc($Image, $CenterX, $CenterY, $DiameterX, $DiameterY, $Start, $End, $Color) {
// To draw the arc
imagearc($Image, $CenterX, $CenterY, $DiameterX, $DiameterY, $Start, $End, $Color);
// To close the arc with 2 lines between the center and the 2 limits of the arc
$x = $CenterX + (cos(deg2rad($Start))*($DiameterX/2));
$y = $CenterY + (sin(deg2rad($Start))*($DiameterY/2));
imageline($Image, $x, $y, $CenterX, $CenterY, $Color);
$x = $CenterX + (cos(deg2rad($End))*($DiameterX/2));
$y = $CenterY + (sin(deg2rad($End))*($DiameterY/2));
imageline($Image, $x, $y, $CenterX, $CenterY, $Color);
}
?>

An example:

<?php
$destImage = imagecreate( 216, 152 );
$c0 = imagecolorallocate( $destImage, 0, 255, 255 );
$c1 = imagecolorallocate( $destImage, 0, 0, 0 );
$c2 = imagecolorallocate( $destImage, 255, 0, 0 );
ImageFilledRectangle ( $destImage, 0, 0, 216, 152, $c0 );
uimagefilledarc( $destImage, 108, 76, 180, 80, 0, 130, $c1 );
uimagenofilledarc( $destImage, 108, 76, 180, 80, 0, 130, $c2 );
header("content-type: image/PNG");
ImagePNG( $destImage );
ImageDestroy( $destImage );
?>

-- From the PHP Manual: Imagefilledarc

But there is also the imagefilledarc function if you are using GD 2.

imagefilledarc -- Draw a partial ellipse and fill it
int imagefilledarc ( resource image, int cx, int cy, int w, int h, int s, int e, int col, int style)

imagefilledarc() draws a partial ellipse centered at cx, cy (top left is 0, 0) in the image
represented by image. W and h specifies the ellipse's width and height respectively while
the start and end points are specified in degrees indicated by the s and e arguments.

Style can be

1. IMG_ARC_PIE
2. IMG_ARC_CHORD
3. IMG_ARC_NOFILL
4. IMG_ARC_EDGED

IMG_ARC_PIE and IMG_ARC_CHORD are mutually exclusive;
IMG_ARC_CHORD just connects the starting and ending angles
with a straight line, while IMG_ARC_PIE produces a rounded edge.
IMG_ARC_NOFILL indicates that the arc or chord should be outlined,
not filled. IMG_ARC_EDGED, used together with IMG_ARC_NOFILL,
indicates that the beginning and ending angles should be connected
to the center - this is a good way to outline (rather than fill) a 'pie slice'.

Note: This function was added in PHP 4.0.6 and requires GD 2.0.1
-- From the PHP Manual

PHP Code:

<?php
 
Header ("Content-type: image/png");
 
$im = imagecreate(300, 300);
 
// variables for arc
// circle center
$center_x = 150;
$center_y = 150;
 
// height and width
$width = 150;
$height = 150;
 
// start and end angle
$start = 0;
$end = 360;
 
$white = ImageColorAllocate($im, 255, 255, 255);
$black = imageColorAllocate($im, 0, 0, 0);
 
// fill with white
ImageFill($im, 0, 0, $white);
 
// draw arc
ImageArc($im, $center_x, $center_y, $width, $height, $start, $end, $black);
 
ImagePng ($im);
 
// destroy the image to free memory
 
ImageDestroy ($im);
 
?>

The image created:

Use this program to get a better understanding of how to specify the degrees for an arc.

See it in action. ¦ Get complete code.

Image Example: Drawing lines and polygons

imageline -- Draw a line
int imageline ( resource image, int x1, int y1, int x2, int y2, int col)

imageline() draws a line from x1, y1 to x2, y2
(top left is 0, 0) in image im of color col.

The arrows point to where the line will end.

PHP Code:

<?php
 
Header ("Content-type: image/png");
 
$image = imagecreate(140, 140);
 
$black = imageColorAllocate($image, 0, 0, 0);
$white = ImageColorAllocate($image ,255,255,255);
$blue = ImageColorAllocate ($image, 0, 0, 255);
 
imageline($image, 25, 50, 100, 125, $white);
imageline($image, 50, 100, 100, 0, $blue);
 
ImagePng ($image);
 
// destroy the image to free memory
 
ImageDestroy ($image);
 
?>

The image:

imagepolygon -- Draw a polygon
int imagepolygon ( resource image, array points, int num_points, int col)

imagepolygon() creates a polygon in image id. points is a PHP array containing the polygon's vertices, ie. points[0] = x0, points[1] = y0, points[2] = x1, points[3] = y1, etc. num_points is the total number of vertices.

imagefilledpolygon -- Draw a filled polygon
int imagefilledpolygon ( resource image, array points, int num_points, int col)

imagefilledpolygon() creates a filled polygon in image image. points is a PHP array containing the polygon's vertices, ie. points[0] = x0, points[1] = y0, points[2] = x1, points[3] = y1, etc. num_points is the total number of vertices.

Q: What are vertices?

A: plural for vertex, a vertex is a 3D point. A 3D point has an x, y, and z coordinate.
(Note: you can just specify a "2D" point, leaving the z coordinate's value to 0.)
Vertices are the corner point of an angle, polygon or, solid.

An edge/line connects two vertices.
Eg. a square has 4 vertices
Draw line from point [1.1] to [1.2] to [2.1] to [2.2] and you get a square.

The image:

See it in action. ¦ Get complete code.

Create an array of points for the polygon... example script follows

PHP Code:

<?php
 
Header ("Content-type: image/png");
 
/////// set up array of points for polygon ///////
 
$a = array(
"0" => "40", // x1
"1" => "50", // y1
"2" => "20", // x2
"3" => "240", // y2
"4" => "60", // x3
"5" => "60", // y3
"6" => "240", // x4
"7" => "20", // y4
"8" => "50", // x5
"9" => "40", // y5
"10" => "10", // x6
"11" => "10", // y6
);
 
///// create canvas /////
 
$im = ImageCreate (250, 250);
 
//define colors.. first color declared is set as background
 
$white = ImageColorAllocate ($im, 255, 255, 255);
$blue = ImageColorAllocate ($im, 0, 0, 255);
 
// draw a polygon
 
ImageFilledPolygon ($im, $a, 6, $blue );
 
// create the image
 
ImagePng ($im);
 
// destroy the image to free memory
 
ImageDestroy ($im);
?> 

The image:

Another example of drawing a polygon:

The image:

See it in action. ¦ Get complete code.

Image Example: Drawing rectangles and including strings

imagerectangle -- Draw an outline of a rectangle
int imagerectangle ( resource image, int x1, int y1, int x2, int y2, int col)

imagerectangle() creates a rectangle of color col in image image starting at upper
left coordinate x1, y1 and ending at bottom right coordinate x2, y2. 0, 0 is the
top left corner of the image.

imagefilledrectangle -- Draw a filled rectangle
int imagefilledrectangle ( resource image, int x1, int y1, int x2, int y2, int col)

Imagefilledrectangle() creates a filled rectangle of color col in image image starting
at upper left coordinates x1, y1 and ending at bottom right coordinates x2, y2. 0, 0
is the top left corner of the image.

PHP Code:

<php
 
Header ("Content-type: image/png");
 
$image = imagecreate(100, 100);
 
$black = imageColorAllocate($image, 0, 0, 0); // allocate color black
$blue = ImageColorAllocate ($im, 0, 0, 255);
 
ImageFilledRectangle ($image, 5, 5, 50,50, $blue);
 
ImagePng ($image);
 
// destroy the image to free memory
 
ImageDestroy ($image);
?>

The image:

imagestring -- Draw a string horizontally
int imagestring ( resource image, int font, int x, int y, string s, int col)

imagestring() draws the string s in the image identified by image at coordinates x, y (top left is 0, 0) in color col. If font is 1, 2, 3, 4 or 5, a built-in font is used.

PHP Code:

<?php
Header("Content-type: image/jpeg");
 
//create a new image imagecreate ( int x_size, int y_size)
$image = ImageCreate(400,50);
 
//create white (for background )
$white = ImageColorAllocate($image ,255,255,255);
 
//create blue for text
$blue = ImageColorAllocate($image , 0,0,255);
 
//OK lets create our white background
//imagefilledrectangle ( resource image, int x1, int y1, int x2, int y2, int col)
ImageFilledRectangle($image ,0,0,400,50,$white);
 
$text=date("l F d, Y");
 
//display some text
//imagestring ( resource image, int font, int x, int y, string s, int col)
ImageString($image,3,5,20,$text,$blue);
 
//output image to browser as a JPEG
ImageJPEG($image);
 
//clean up by destroying the image
ImageDestroy($image);
?>

The image:

Other image functions to know about

Here are some more functions that you should familiarize yourself with. The complete list of image functions can be found in the PHP manual: Image Functions.

magesx -- Get image width
int imagesx ( resource image)

Imagesx() returns the width of the image identified by image.

Imagesy -- Get image height
int imagesy ( resource image)

Imagesy() returns the height of the image identified by image.

getimagesize -- Get the size of an image
array getimagesize ( string filename [, array imageinfo])

GetImageSize() "Returns an array with 4 elements. Index 0 contains the width of the image in pixels. Index 1 contains the height. Index 2 is a flag indicating the type of the image: 1 = GIF, 2 = JPG, 3 = PNG ... 14 = IFF. These values correspond to the IMAGETYPE constants that were added in PHP 4.3. Index 3 is a text string with the correct height="yyy" width="xxx" string that can be used directly in an IMG tag." -- From the PHP manual: getimagesize

Since you can not output text/html to the browser when you are using the image
functions to create an image in a PHP script, you can get around this by making
the source of your image the PHP script that creates the image. This has to be done in either an HTML page or a separate PHP script etc.

HTML:

<img border="0" src="http://onaje.com/code/create_circ.php">

There are many more things that can be accomplished with PHP's image functions.
Experiment with them and see what you can create.

Last modified: April 15th, 2009