San José State University
Thayer Watkins
Silicon Valley
& Tornado Alley

Image Manipulation for the Web

A Specimen of the Rare
Cyan Swallowtail Butterfly

Image Manipulation for the Web

When an image needs to be adjusted for brightness or color the usual procedure is to open it in an image manipulation package such as Photoshop, make the adjustments and save it to a new file. This procedure is tried and true but it is unnecessarily cumbersome. What are shown below are some Java applets which allow adjustment of the way an image is viewed through simple modification of <param> tags. These applets allow quicker viewing of how the adjustments appear than the open-modify-save-upload sequence.

Suppose someone wants the farm scene below to appear a bit greener than it is in reality.

The applet allows an increment in the green component of the color at each pixel. Below is shown the result of adding 40 to the green component at each pixel.

An alternate means would be to scale up the green component of the pixels by some factor, say 1.5. The result is shown below:

The second method is better for maintaining contrasts.

Suppose a realistic image of blue roses is desired. One way to get blue roses is to switch the blue and red component in the image. What results has the subtle variations in color of a real rose but with predominant blue color rather than red. The original and the result are shown below.

If one wants an image of a yellow rose one can take a picture of a yellow rose and scan it and upload it. Or, one can use the applet and make the green component equal to the red component with the result shown below:

Another version allows color modification within a selected area of the image, as is illustrated below:

A variation on this is to modify the color everywhere except within a selected area. In the case below the image outside of the selected area is converted to gray-scale by making the RGB values for each pixel outside the selected area equal to the average of the original values.

One version of the image manipulation applet makes provision for cropping the image and for scaling the size of the image up or down:

The image manipulation applet computes the RGB values as a linear transformation of the RGB values of the original image. One can invert the colors by setting the

new values = 255 - original values


This changes white to black and black to white. Each color is changed to its complement; i.e., red becomes cyan, green become magenta, blue becomes yellow, and vice versa.

Another feature implemented in a separate applet allows one image to be imposed upon another with a specified degree of translucency (alpha value) for each color component. An example is shown below:

Another entirely different applet allows for the conversion of a specific color into another specified color as is shown below:

Betty's Orange Swallowtail Butterfly