Graphics II. Using Existing Graphics.

In the last section we looked at the elements of creating graphics from our own canvas. PHP also allows us to import WBMP, JPEG, or PNG graphics ino our program and use them as a canvas to draw on! We do this by using the imagePNG(), imageJPEG(), or imageWBMP() functions. They all take a pathname as an argument. e.g.

    $[image handle]=imageWBMP("[path]");

Drawing on an Existing Graphic

Once we have imported the graphic we can draw on it using all of PHP's graphical tools. In the following example we import a map of some real-estate lots, and Freshen up the map with our drawing tools. Here is what the map looks like before we import it start working on it.

Lots.png before adding graphic text and flood filling

Example 1

<?
 1 header("content-type:image/png");

 2 $Image=imagecreatefrompng("lots.png");

 3 $green=ImageColorAllocate($Image,0,255,0);
 4 $red=ImageColorAllocate($Image,255,0,0);
 5 $yellow=ImageColorAllocate($Image,255,255,0);
 6 $black=ImageColorAllocate($Image,0,0,0);
 7 $blue=ImageColorAllocate($Image,0,0,255);

 8 imagefill ($Image, 50, 80, $green);
 9 imagefill ($Image, 150, 80, $yellow);
 10 imagefill ($Image, 250, 80, $blue);
 11 imagefill ($Image, 400, 80, $red);

 12 imagestring ($Image, 5, 170, 125, "ELM Street", $black);
 13 imagestring ($Image, 5, 40, 145, "Frank's Real Estate!", $black);
 14 imagestring ($Image, 2, 220, 147, "(The uncolored lots are already sold)", $black);

 15 ImagePNG($Image);
 16 ImageDestroy($Image);
?>

What's Going on

Line 1 We send out our header.
Line 2 We create our canvas in the usual manner, but this time from an exising .png file. We can use WBMP,PNG or JPEG file formats as a canvas.
Line 3-7 Handles are allocated to colors.
Line 8-11 We flood fill four of the lots.
Line 12-14 We add some text at the bottom of the picture.
Line 15 We send our image to the browser...
Line 16 ..And destroy the canvas, thus freeing up memory.

Here is the resulting 'doctored' graphic. Note this is a copy of the original PNG file. That file still exists in its original form.

Lots.png with graphic text and flood filling

Resizing (PHP) Generated Graphics in the Browser

If you worked your way through the last section, you may have noticed something interesting about PHP generated graphics. If you re-size the window smaller than their natural size, the graphic will resize with them. Of course, once they have been saved to disc they will act like any normal graphic.

Working with more than One Image.

We can load as many images as we want into the computers memory, however we can only out put one image at a time! You may ask what good this is. Well what we can do is copy a section of one image (the source image), and paste it into a section of another image. (The destination image.), and then we can output the destination image. We do this using ImageCopyResized() function, or the ImageCopyResampled() function. These functions do essentially the same thing although ImageCopyResampled() resamples pixels while it is used, and it is claimed this makes for a smoother transition. ImageCopyResampled() is new in PHP4.

These functions take several parameters which will required a little explanation.

  //all the following needs to go on a single line! It is split here for clarity.

  ImageCopyResampled ([dest. image handle], [source image handle],
                          [dest. X], [dest.Y], [src. X], [Src Y],
                             [dest width], [dest height], [src width], [src height])

The function takes a rectangular area from the source file, and pastes it into a rectangular area of the destination file, resizing it if necessary.
The first two parameters are the handles of the destination and the source file.
The next two parameters [dest. X], [dest.Y] are the coordinates of the top left corner of the rectangular area of the destination file, where the image will be inserted.
The next two parameters [source. X], [source.Y] are the coordinates of the top left corner of the rectangular area of the source file where we will start taking the sample.
The last two parameters [src width], [src height] measure the size of the rectangular area we are going to take from the source file
The penultimate two parameters [dest width], [dest height] is the size of the rectangular hole in the destination file where we are going to place our source chunck.
Note that the source chunk will be either squeezed or expanded to fit the hole.
In order to make sure there is no resizing, make sure that the donor site and the recipient site are the same dimensions.

In the next example we take a 'sold' graphic and place it in the lots that have already been sold. We will be using a JPEG file rather than a PNG file for our destination file. The reason for this is that PNG files employ palettes which are referenced by numbers. In order for the source graphic to have its original colors we would have to use code to manipulate the PNG grapic palettes. This is complicated stuff and is out of scope for this introductory tutorial. However we will later look at a relatively simple way to get round this problem.

Example 2

<?
 1 
 2 header("content-type:image/png");

 3 $Image=imagecreatefromJPEG("lots.jpg");
 4 $sold=imagecreatefrompng("sold2.png");

 5 $green=ImageColorAllocate($Image,0,255,0);
 6 $red=ImageColorAllocate($Image,255,0,0);
 7 $yellow=ImageColorAllocate($Image,255,255,0);
 8 $black=ImageColorAllocate($Image,0,0,0);
 9 $blue=ImageColorAllocate($Image,0,0,255);

 10 imagefill ($Image, 50, 80, $green);
 11 imagefill ($Image, 150, 80, $yellow);
 12 imagefill ($Image, 250, 80, $blue);
 13 imagefill ($Image, 400, 80, $red);
 14 imagesetthickness($Image,6);

 15 $soldwidth=imagesx($sold);
 16 $soldheight=imagesy($sold);

 17 imagecopyresampled($Image,$sold,80,105,0,0,$soldwidth,$soldheight,$soldwidth,$soldheight);
 18 imagecopyresampled($Image,$sold,197,105,0,0,$soldwidth,$soldheight,$soldwidth,$soldheight);
 19 imagecopyresampled($Image,$sold,293,105,0,0,$soldwidth,$soldheight,$soldwidth,$soldheight);

 20 imagestring ($Image, 5, 170, 125, "ELM Street", $black);
 21 imagestring ($Image, 5, 40, 145, "Frank's Real Estate!", $black);
 22 imagestring ($Image, 2, 220, 147, "(The uncolored lots are already sold)", $black);
 23 //ImagePNG($Image,"c:/courses/php/graphic2_2.png");
 24 ImagePNG($Image);
 25 ImageDestroy($Image);
 26 ImageDestroy($sold);

?>

What's Going on

Line 1

Here is what the graphic looks like. We must confess it looks rather tatty! The reason for this is that as you probably know, JPEG images don't deal with flood fills too well.

It would be nice if we could use two PNG images, without having to worry about advanced things like palette manipulation, and luckily there is!

Cutting and Pasting from the Same Image

If we paste a PNG "logo" on to a PNG destination file, in most cases the pasted logo will have completly different coloring from the original. This is because of pallette incompatibilities. Without getting too complicated, the color "red" in the logo will have a different handle to the color "red" in the destination file!

The easiest way to get round this is to create your logo actually on the destination file, in some inconspicuos spot. Then, because the logo and the destination file will share a palette, you can be sure that both the logo and the destination file have the same handles for the same colors. You will have to alter your destination file in a Graphics program. Here is the graphic (a map of Ohio, U.S.A) that we will be using, together with the graphic we will be creating dynamically.

Essentially we are going to copy the star in the left hand corner, and paste it on the locations of say our branch offices in Ohio. Because we don't want the transplanted star to have a grey background, we are going to make the background of the star transparent before we copy it. We will then restore the background to the (almost) original color after we have done the copying.

Example 2

<?
 1 header("content-type:image/png");
 2 $Image=imagecreatefromPNG("oh.png");

 3 $Trans=ImageColorAt($Image,0,0);
 4 $refil=ImageColorAllocate($Image,192,192,193);


 5 imagecolortransparent($Image,$Trans);

 6 imagecopyresampled($Image,$Image,80,105,0,0,50,50,50,50);
 7 imagecopyresampled($Image,$Image,180,255,0,0,50,50,50,50);

 8 imagefill ($Image, 1, 1, $refil);
 9 imagefill ($Image, 385, 1, $refil);
 10 imagefill ($Image, 1, 485, $refil);
 11 imagefill ($Image, 350, 455, $refil);

 12 ImagePNG($Image);
 13 ImageDestroy($Image);

?>

What's Going on

Line 1 Send the header
Line 2 Create an image handle from a PNG file
Line 3 When we move the star we want the background to be transparent, So we will have to make all the background color of the star transparent. We find the background color by using the ImageColorAt() function to find the color value at coordinates 0,0. This is the color we will be making transparent.
Line 4 After we have made the color transparent (see line 5) all they grey areas will disappear from the map. We will want to refil it with an almost identical color. In fact the blue value has been increased from 192 to 193.(We found the RGB value of the original color using a graphics program).
Line 5 The imagecolortransparent() function makes the selected color transparent.
Line 6-7 We now copy the top left hand corner (with it's now transparent background), and paste it in the locations we want in the file.
Line 8-11 We flood fill the areas that have been made transparent with our (almost-the-same) $refil color.
Line 12 Send the revised graphic to the browser.
Line 13 Finally we do our houskeeping, and free up memory.

The last two sections have been an introduction to PHP graphics. Hopefully there is enough information to get you hacking, and create some cool programs of your own. We have included a couple of case studies to whet your appertite.