JavaScript Editor Javascript source editor     Web programming 

Team LiB
Previous Section Next Section

Modifying Existing Images

The process of creating images from other images follows the same essential steps as creating a new imagethe difference lies in what acts as the image canvas. Previously, you created a new canvas using the ImageCreate() function. When creating an image from a new image, you use the ImageCreateFrom*() family of functions.

You can create images from existing GIFs, JPEGs, PNGs, and plenty of other image types. The functions used to create images from these formats are called ImageCreateFromGif(), ImageCreateFromJpg(), ImageCreateFromPng(), and so forth. In the next example, you can see how easy it is to create a new image from an existing one. The base image is shown in Figure 14.5.

Figure 14.5. The base image.

Listing 14.5 shows how to use an existing image as the canvas, which then has ellipses drawn on it.

Listing 14.5. Creating a New Image from an Existing Image
1:  <?
2:  //use existing image as a canvas
3:  $myImage = ImageCreateFromPng("baseimage.png");
5:  //allocate the color white
6:  $white = ImageColorAllocate($myImage, 255, 255, 255);
8:  //draw on the new canvas
9:  ImageFilledEllipse($myImage, 75, 70, 20, 20, $white);
10: ImageFilledEllipse($myImage, 150, 70, 20, 20, $white);
11: ImageFilledEllipse($myImage, 225, 70, 20, 20, $white);
13: //output the image to the browser
14: header ("Content-type: image/png");
15: ImagePng($myImage);
17: //clean up after yourself
18: ImageDestroy($myImage);
19: ?>

Save this listing as imagefrombase.php, and place it in the document root of your Web server. When accessed, it should look something like Figure 14.6.

Figure 14.6. Drawing on an existing image.

The next example takes this process a few steps forward and utilizes some different image-modification functions. In this case, the existing images are four PNG images, each with a differently colored triangular slice on a gray background. In Listing 14.6, you will stack these images on top of each other and blend them together at each step so that the gray background becomes transparent and the image beneath it shows through.

Listing 14.6. Stacking Images and Making Them Transparent
1:  <?
2:  //select an image to start with
3:  $baseimage = ImageCreateFromPng("img1.png");
5:  //loop through images #2 through the end
6:  for($i=2; $i <5; $i++) {
7:    //allocate the transparent color, and stack
8:    $myImage = ImageCreateFromPng("img".$i.".png");
9:    $gray = ImageColorAllocate($myImage, 185, 185, 185);
10:   ImageColorTransparent($myImage, $gray);
11:   ImageCopyMerge($baseimage,$myImage,0,0,0,0,150,150,100);
12: }
14: //output the image to the browser
15: header ("Content-type: image/png");
16: ImagePng($baseimage);
18: //clean up after yourself
19: ImageDestroy($baseimage);
20: ?>

In line 3, one of the images is selected to be the base image. In this case, it's img1.png. The for loop in lines 811 handles the bulk of the work. Knowing that you have four images and that the first one is already used as the base, that leaves three more images to be stacked and made transparent.

After the new layer is created on line 8, its gray areas are indicated as transparent and it is merged on top of the base image. As the layers are stacked, the base image contains an increasing number of layers, until the total number of four layers is reached. At that point, the image is sent to the browser, in lines 1516.

Save this listing as imagestacker.php, and place it in the document root of your Web server. When accessed, it should look something like Figure 14.7.

Figure 14.7. Stacked transparent images produce a composite.

    Team LiB
    Previous Section Next Section

    JavaScript Editor Javascript source editor     Web programming