Part One: Using PHP to Create and Draw Images

Although you may not have known it, PHP comes equipped with many functions and libraries that allow the developer to create images using the popular server side language. In today’s post, we are going to cover the basics of creating and drawing images using PHP. Drawing images in PHP is not as difficult as you might think, in fact it can be used to do all sorts of cool tricks such as bar graphs and pie charts. You will need to be sure you have all the necessary updates and versions, which I will touch on briefly in the beginning. You can view the demos first: Demo 1, Demo 2, Demo 3

-

What you will need…

• This post assumes you are running the latest available version of PHP, if you need to upgrade, you may visit php.net.
• This post also assumes you have and are running the latest version of Thomas Boutell’s GD graphics library, if you arent sure check your settings, then see the manual for image library setup.
• Note that most new versions come with everything you will need installed. Luckily, I didnt have to install any libraries or plugins, so you might want to try out the final example below first.

-

The Basics

Before going any further I would like to say a word about color when dealing with PHP. Instead of using hex codes, such as “#000000″ for black, php uses the RGB system. This means that we use decimal values to describe the colors red, green, and blue where 0 is no color and 255 is the highest amount of that color. For example, white would be:

(255,255,255)

While black is:

(0, 0, 0)

Now that the boring stuff is over, lets get coding!

-

Creating the Canvas

The first thing you need to do when drawing an image in php is set up your virtual canvas. Creating an image begins with the ImageCreate() function, the width and height are put inside the parentheses. Lets set up our canvas to be 300 pixels wide by 300 pixels tall:

<code><span style="#990000;"><?php
//Create Canvas
$myImage=ImageCreate(300,300);

-

Setting up the color scheme

Ok, so now we have your canvas but we need a background color for it, as well as some colors to draw with. To set the backround color of your canvas, you simply define your color scheme. Your background color will be the first color you define. You define colors using the ImageColorAllocate function. Lets set some colors now:

–

<code><span style="#990000;">//Define Colors, First Color is BG Color
$black=ImageColorAllocate($myImage, 0, 0, 0);
$white=ImageColorAllocate($myImage, 255, 255, 255);
$red=ImageColorAllocate($myImage, 255, 0, 0);</span></code><code><span style="#990000;">

-

Drawing the Shapes

Now that we have our colors setup, we can move onto to actually drawing the images and outputting them to the browser. Some common php function shapes, which are self-explanatory, are seen below:

• ImageEllipse()
• ImageArc()
• ImagePolygon()
• ImageRectangle()
• ImageLine()

Drawing the images requires a bit more thinking. These functions use x and y axis coordinates to setup where the images begins, then uses x and y coordinates to determine how long the image goes on. Lets look at how to draw 2 simple rectangles:
-

<code><span style="#990000;">//Draw Shapes
ImageRectangle($myImage, 50, 50, 200, 115, $red);
ImageRectangle($myImage, 50, 150, 200, 115, $white);

-
Our first rectangle has a color of red, starts at the coordinates 50,50, continues on the x axis for 150 pixels and continues on the y-axis for 65 pixels. Our second rectangle is white and because of its coordinates will show up below our red rectangle.

-

Outputting the image to the browser

Were almost there! Now we need to send some headers to the browser letting it know that this will be an image, with the .png extension:

<code><span style="#990000;"> //Output to browser
header("Content-type:image/png");
ImagePng($myImage);

-

Cleaning up

Last thing to do is free up the memory used by calling the ImageDestroy() function:

<code><span style="#990000;">//Clean up
ImageDestroy($myImage);
?>

-

The Whole “Shebang”

Now that were done, lets have a look at our final code:

<code><span style="#990000;"><?php
//Create Canvas
$myImage=ImageCreate(300,300);

//Define Colors, First Color is BG Color
$black=ImageColorAllocate($myImage, 0, 0, 0);
$white=ImageColorAllocate($myImage, 255, 255, 255);
$red=ImageColorAllocate($myImage, 255, 0, 0);

//Draw Shapes
ImageRectangle($myImage, 50, 50, 200, 115, $red);
ImageRectangle($myImage, 50, 150, 200, 115, $white);

//Output to browser
header("Content-type:image/png");
ImagePng($myImage);

<span style="#990000;">//Clean up
ImageDestroy($myImage);?&gt;

If you get a headers already sent error you are probably outputting other data to the browser first. There should be no html before these codes and the PHP code should be the first line(s) in your code.

-

Demo

Of course, no tutorial would be complete without a working demo.

-

Other Functions

The above has just barely skimmed the surface when it comes to what you can do with php and images. I will briefly review a few options we can change into the code above to achieve different results.

-

Color Filled Shapes

You will notice that our rectangles in the example above are not filles with color, we can replace a few lines to achieve this using the ImageFilledRectangle()function, as seen below:

<code><span style="#990000;"><?php
//Create Canvas
$myImage=ImageCreate(300,300);
//Define Colors, First Color is BG Color
$black=ImageColorAllocate($myImage, 0, 0, 0);
$white=ImageColorAllocate($myImage, 255, 255, 255);
$red=ImageColorAllocate($myImage, 255, 0, 0);
//Draw Shapes
<span style="blue;">ImageFilledRectangle($myImage, 50, 50, 200, 115, $red);
ImageFilledRectangle($myImage, 50, 150, 200, 115, $white);
</span>
//Output to browser
header("Content-type:image/png");
ImagePng($myImage);
//Clean up
ImageDestroy($myImage);?&gt;

-
Which will give you something like this.

-

Placing Text on Images

We can place text on our image by using the ImageString() function, which requires six parameters. The parameters need to be in the following order:Image Stream ($myImage), the font size, starting x position, starting y position, the text ($demoText), the color ($white). See the code below for an example:

<code><span style="#990000;">$demoText="CreatingDrew.com";
ImageFilledRectangle($myImage, 50, 50, 200, 115, $red);
ImageFilledRectangle($myImage, 50, 150, 200, 115, $white);
</span><span style="blue;">
ImageString($myImage, 5, 50, 250, $demoText, $white);

Note the code in blue which holds our six parameters, feel free to view the demo for this one as well.

-

Article Sources

• php.net
• PHP image setup via php.net
• Demo 1
• Demo 2
• Demo 3

-

Download the Codes

I have put all 3 of the full code examples above into a zip file for those who would like to use it. You may download the zip file here.

-

Stay Tuned for Part 2

In part 2 we will dive deeper into the using php with images and we will create bar and pie charts as well as transparent images.