PHP and MySQL Web Development - P84 pps

PHP has some built-in image information functions, and you can also use the gd library to create new images or manipulate existing ones.This chapter discusses how to use the image functi

19 Generating Images

ONE OF THE USEFUL THINGS YOU CANdo with PHP is create images on-the-fly PHP has some built-in image information functions, and you can also use the gd library to create new images or manipulate existing ones.This chapter discusses how to use the image functions to achieve some interesting and useful effects

We will look at

n Setting up image support in PHP

n Understanding image formats

n Creating images

n Using text and fonts to create images

n Drawing figures and graphing data Specifically, we’ll look at two examples: generating Web site buttons on-the-fly, and drawing a bar chart using figures from a MySQL database

Setting Up Image Support in PHP

Image support in PHP is available via the gd library, available from http://www.boutell.com/gd/

From PHP 4.3, PHP comes with its own version of the gd library, supported by the PHP team.This version has extra features and is usually more up-to-date, so it’s advisable

to use this version

With some earlier versions of PHP you have a choice of using the gd or gd2 library:

We recommend you use gd2 as it is more stable

Under Windows, PNGs and JPEGs are automatically supported

If you have Unix and want to work with PNGs, you will need to install libpng and zlib from the following places (respectively):

You will then need to configure PHP with the following options:

with-png-dir=/path/to/libpng with-zlib-dir=/path/to/zlib

If you have UNIX and want to work with JPEGs, you will need to download jpeg-6b, and recompile gd with jpeg support included.You can download this from

ftp://ftp.uu.net/graphics/jpeg/

You will then need to reconfigure PHP with the with-jpeg-dir=/path/to/jpeg-6b

option, and recompile it

If you want to use TrueType fonts in your images, you will also need the FreeType library.This also comes with PHP 4 Alternatively, you can download this from http://www.freetype.org/

If you want to use PostScript Type 1 fonts instead, you will need to download t1lib, available from

ftp://sunsite.unc.edu/pub/Linux/libs/graphics/

You will then need to run PHP’s configure program with

with-t1lib[=path/to/t1lib]

Image Formats

The gd library supports JPEG, PNG, and WBMP formats It no longer supports the GIF format Let’s briefly look at each of these formats

JPEG

JPEG (pronounced “jay-peg”) actually stands for Joint Photographic Experts Group and is

the name of a standards body.The file format we mean when we refer to JPEGs is actu-ally called JFIF, which corresponds to one of the standards issued by JPEG

In case you are not familiar with them, JPEGs are usually used to store photographic

or other images with many colors or gradations of color.This format uses lossy compres-sion—that is, in order to squeeze a photograph into a smaller file, some image quality is lost Because JPEGs should contain what are essentially analog images, with gradations of color, the human eye can tolerate some loss of quality.This format is not suitable for line drawings, text, or solid blocks of color

You can read more about JPEG/JFIF at the official JPEG site:

http://www.jpeg.org/

PNG (pronounced “ping”) stands for Portable Network Graphics.This file format is the replacement for GIF (Graphics Interchange Format) for reasons we’ll discuss in a minute.

The PNG Web site describes it as “a turbo-studly image format with lossless compres-sion.” Because it is lossless, this image format is suitable for images that contain text, straight lines, and simple blocks of color such as headings and Web site buttons—all the same purposes for which you previously might have used GIFs

It offers better compression than GIF as well as variable transparency, gamma correc-tion, and two-dimensional interlacing It does not, however, support animations—for this you must use the extension format MNG, which is still in development

You can read more about PNG at the official PNG site:

http://www.libpng.org/pub/png/

WBMP

WBMP stands for Wireless Bitmap It is a file format designed specifically for wireless

devices

GIF

GIF stands for Graphics Interchange Format It is a compressed lossless format widely used on the Web for storing images containing text, straight lines, and blocks of single color

The question you are likely asking is, why doesn’t gd support GIFs?

The answer is that it used to, up to version 1.3 If you want to install and use the GIF functions instead of the PNG functions, you can download gd version 1.3 from

http://www.linuxguruz.org/downloads/gd1.3.tar.gz Note, however, that the makers of gd discourage you from using this version and no longer support it.This copy of the GIF version might not be available forever

There is a good reason that gd no longer supports GIFs Standard GIFs use a form of

compression known as LZW (Lempel Ziv Welch), which is subject to a patent owned by

UNISYS Providers of programs that read and write GIFs must pay licensing fees to UNISYS For example, Adobe has paid a licensing fee for products such as Photoshop that are used to create GIFs Code libraries appear to be in the situation in which the writers of the code library must pay a fee, and, in addition, the users of the library must also pay a fee.Thus, if you use a GIF version of the gd library on your Web site, you might owe UNISYS some fairly hefty licensing fees

This situation is unfortunate because GIFs were in use for many years before UNISYS chose to enforce licensing.Thus, the format became one of the standards for the Web A lot of ill feeling exists about the patent in the Web development community

You can read about this (and form your own opinion) at UNISYS’s site

We are not lawyers, and none of this should be interpreted as legal advice, but we think

it is easier to use PNGs, regardless of the politics

Browser support for PNGs is improving; however, the LZW patent expires on June 19, 2003, so the final outcome is yet to be seen

Creating Images

The four basic steps to creating an image in PHP are as follows:

1 Creating a canvas image on which to work

2 Drawing shapes or printing text on that canvas

3 Outputting the final graphic

4 Cleaning up resources

We’ll begin by looking at a very simple image creation script.This script is shown in Listing 19.1

Listing 19.1 simplegraph.php—Outputs a Simple Line Graph with the Label Sales

<?php // set up image

$height = 200;

$width = 200;

$im = ImageCreate($width, $height);

$white = ImageColorAllocate ($im, 255, 255, 255);

$black = ImageColorAllocate ($im, 0, 0, 0);

// draw on image ImageFill($im, 0, 0, $black);

ImageLine($im, 0, 0, $width, $height, $white);

ImageString($im, 4, 50, 150, 'Sales', $white);

// output image Header ('Content-type: image/png');

ImagePng ($im);

// clean up ImageDestroy($im);

?>

The output from running this script is shown in Figure 19.1

Figure 19.1 The script draws a black background and then adds a line and a text label for the image.

We’ll walk through the steps of creating this image one by one

Creating a Canvas Image

To begin building or changing an image in PHP, you will need to create an image iden-tifier.There are two basic ways to do this One is to create a blank canvas, which you can

do with a call to the ImageCreate()function, as we have done in this script with the following:

$im = ImageCreate($width, $height);

You need to pass two parameters to ImageCreate().The first is the width of the new image, and the second is the height of the new image.The function will return an iden-tifier for the new image (These work a lot like file handles.)

An alternative way is to read in an existing image file that you can then filter, resize,

or add to.You can do this with one of the functions ImageCreateFromPNG(), ImageCreateFromJPEG(), or ImageCreateFromGIF(), depending on the file format you are reading in Each of these takes the filename as a parameter, as in, for

example,

$im = ImageCreateFromPNG('baseimage.png');

An example is shown later in this chapter using existing images to create buttons on-the-fly

Drawing or Printing Text on to the Image

There are really two stages to drawing or printing text on the image

First, you must select the colors in which you want to draw As you probably already know, colors to be displayed on a computer monitor are made up of different amounts