Dynamic Images on Your Website

One of the most effective ways to make your website more visually appealing, is to enhance it with appropriate graphics and other digital images. However, even the most well-chosen and colorful images still have one inherent weakness — they are static, in the sense that they are limited to the colors, resolution, size, and other properties that they possessed when you first loaded them onto your Web server and incorporated them into your Web pages.

Consequently, those images cannot be modified by the visitor to your website, regardless of how valuable such a capability would be for your website's purposes. For instance, it would be handy to allow someone uploading a picture to your photo album website, to be able to scale it in size, larger or smaller, as desired. Moreover, the image cannot even be changed by you, except manually, by modifying it on your local computer, and then uploading it again to your website. Also, if you have specified the image's sizes in your HTML code, then you would need to modify those values to match the image's new sizes.

Now imagine the possibilities if you could program your website so that those images could be changed in appearance dynamically, based upon input from you or any other website visitor. These changes could include such properties as an image's size, resolution, borders, contrast, dithering, and even its location on a Web page. Imagine automatically rotating an image, flipping it around, adding tint, or combining multiple images into a single one.

Image Magic

In order to do all of the above on your website, you need to use an image manipulation program controllable by source code that can generate your Web pages on the fly. Such languages include PHP, ASP, Perl, and Ruby. All that is required is that your chosen image manipulation program have some sort of application programming interface (API) for the Web language you want to use. In this article, our sample code will make use of PHP.

There are many image manipulation programs available, and I will utilize ImageMagick, for a number of reasons: It is free; it runs on Windows and Linux; it is more commonly supported by Web hosting services than any other similar program; it has been under development and improvement for more than 20 years; and it is offers many impressive capabilities. The instructions for downloading and installing ImageMagick are available on its website; I won't get into those details.

ImageMagick offers many powerful capabilities, but all of them are accessible only through commands. This can be done on a command line. But there's no such thing on your website. Thus, to work with ImageMagick's functionality from your PHP website, you will use an API — in the form of a PHP extension — such as MagickWand or imagick. In this article, I will use the former.

A Command Performance

Now I get to the sample code that will illustrate how to work with ImageMagick. No matter what operation you wish to perform on your chosen image, you first must load that image into computer memory, and assign it to a MagickWand resource. For example, to work with a JPEG image file named picture.jpg, you could use the following in your PHP code:

$resource = NewMagickWand();
                MagickReadImage( $resource, 'picture.jpg' );

After you have created the MagickWand resource, you can begin to make changes to the image. Let's say that the digital picture was loaded by someone visiting your website, and you want to determine the dimensions of their image, in pixels. The following code would do the trick:

$height = MagickGetImageHeight( $resource );
                $width = MagickGetImageWidth( $resource );

Perhaps your website is such that you want to restrict the size of the images uploaded by the visitor, specifically, you want to crop each oversized image so that it has only a width of 600 pixels and a height of 400 pixels, starting in the upper left-hand corner of the image. The following command will do that cropping for you:

MagickCropImage( $resource, 600, 400, 0, 0 );

You may want to then crop the upper right-hand quarter of the image, and enlarge it to 600x400:

$resource = MagickTransformImage( $resource, '300x200+300+200', '600x400' );

Lets say that the final image has a border of 5 pixels on all sides that you want to trim away. Here's how you could do that:

MagickShaveImage( $resource, 5, 5 );

If you want the final image to be in JPEG format, but the visitor uploaded it in PNG format, then use the following command to do the format conversion:

MagickSetImageFormat( $resource, 'JPEG' );

Some images need to be rotated. Here is how you would rotate the image clockwise 90 degrees:

MagickRotateImage( $resource, NewPixelWand( 'white' ), 90 );

The "white" parameter specifies that any image area left vacant because of the rotation, will be colored white.

Show the Audience

When you are done making all of your desired modifications to the digital image, or your website visitor has done the same by interacting with your Web page, then you'll want to save the changes to disk (in other words, the Web server):

MagickWriteImage( $resource, 'new_picture.jpg' );

Finally, to display the final image within a Web page, you can use the following code:

header( 'Content-Type: image/jpeg' );
                MagickEchoImageBlob( $resource );

The written descriptions provided here in this article are of course not as visually interesting as what you will experience when trying out this code on your own, which I invite you to do. Only then will you truly appreciate how these ImageMagick commands, and others, can add some visual magic to your website.

Resources Available

One way to learn more about the details of the MagickWand commands, is to read the online manual. In order to learn how to do more complex image operations, check Anthony Thyssen's examples of ImageMagick examples. However, the best resource on ImageMagick itself is The Definitive Guide to ImageMagick, authored by Michael Still, and published by Apress.

Most if not all website owners should already know that, using PHP and other web technologies, their websites' pages can be made fully dynamic. Using ImageMagick, they can do the same for their websites' digital images.