Providing the user with some form of image editing capability is a frequent requirement of Web applications. For example, a user may wish to resize or crop an uploaded image, or change an image's color composition.

Traditional Web applications could only provide that capability via a server-side imaging toolkit, such as ImageMagick, increasing a server's compute load and also requiring the user to wait for a round-trip of the image data to see the effects of each edit gesture. Rich-clients UIs, by contrast, can often perform image editing operations entirely in the client's address space, relieving the server as well as providing a more responsive user experience.

Adobe's recently-open sourced Flex toolkit provides an extensive API for image manipulation, written in the ActionScript 3 language. Andrew Alderson reviews the most popular ActionScript 3 imaging classes in a recent article, Image Manipulation in Flex.

Alderson first describes the basic operations of loading and storing an image's data in memory. Having a single variable refer to the image's pixel data, for instance, allows for multiple image representations to exist in limited memory.

Following a description of the basic image loading techniques, Alderson demonstrates a number of useful image manipulation API elements. For example, Flex makes it easy to adjust an image's color composition:

One of the things that you are probably going to want to do when manipulating an image is adjust its color. Within the Flash Player API’s there are a number of ways to do this but no matter which you choose what you are basically doing is changing the red, green and blue (and possibly alpha) values of the image. The two main ways to change the values is to either use a ColorTransform or a ColorMatrixFilter...

You adjust brightness by either scaling or offsetting the color values. You change contrast by changing both with all the values being equal and all of the offsets being equal.

Alderson then describes how to change an image's color saturation, how to convert an image to gray-scale, and how to obtain an image's negative.

Next, Alderson discusses image effects:

There is really only one way to apply effects to your images, a ConvolutionFilter. Like the ColorMatrixFilter, the ConvolutionFilter also uses a matrix to change the image but in this case the matrix can be any size. There are a number of factors that affect performance... The most common matrix you will use is a 3x3 matrix.

Applying effects is basically the same as applying color effects - you create a filter and add it to the filters array of the display object. Here are some common filters (the first two parameters are the dimensions of the matrix and the third is the matrix).

In the article, Alderson shows three effects: embossing, edge detection, and sharpening.

The remainder of the article discusses how to rotate and crop an image, and how to print and save an image's bitmap data.What do you think of Flex's image manipulation capabilities?