jakarta-taglibs-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Abey Mullassery" <a...@mullassery.com>
Subject ImageTag - ready for the sandbox
Date Fri, 26 Sep 2003 16:02:09 GMT

"Better late than never.." :-) I hope you will forgive me for the delay.
This is a complete rewrite of the ImageTag that I had sent you long back.

One of my concerns was to keep it as simple as possible and to generate
output images as expected by a person without forcing him to know anything
about the underlying imaging APIs. I am still working on it but I would like
to know your comments and suggestions before I put in more effort.
I have a working sample war(66KB). It includes the basic Java2D and Java
Advanced Imaging based implementations. It can be downloaded from

1. Structure and basic details of the tags

Basically it has a parent <image> tag that can take any number of child
(transformation) tags.
The <image> tag loads the image from a URL "src" or from a previously
generated image referenced by its "name".
Each child tag accesses the image referenced by the parent <image> tag in
turn, to do one transformation. The transformations are done in the order of
the child tags specified.

The <image> tag adds "width" and "height" attributes if it is not specified
already. All attributes and JavaScript required for the HTML <img> tag can
be specified in the "attributes" attribute.

If the dynamic image (parameters) need not change for each request, the
image needn't be generated for each request. Hence the dynamic image is
generated only once (and saved) if the "refresh" attribute is "false"
(saving a lot of processing and memory). If the "refresh" is set to "true"
the image is generated for each request. The default for the "refresh"
attribute is "false".

2. Generation and access of Images

After completing all the transformations, the <image> tag saves the image to
a file by the "name" attribute (explicitly specified) OR a file generated
using the source image filename/ URL. The image type/ encoding is determined
from the filename extension. However writing of "GIF" files are not
supported (instead of throwing an error, it writes a JPEG image and changes
the extension).

Some image transformation uses other images also, such as "overlaying" one
image on the parent image. The image for overlaying itself can be a dynamic
image. To generate such images that can be used later but not displayed, the
"display" attribute can be set to "false". Obviously the default value is
"true". Actually just commenting the HTML can also do this.

The generated images are saved into a default "gen-images" directory or the
one specified by the "dir" attribute. Then an HTML <img> tag pointing to the
newly created image is printed on to the page (As we know, the image is
accessed by a separate request sometime later).

3. Deletion/ reclaiming space/ Garbage collection

A "delete" option can be set for the images to be deleted on exit (of the
application), after each request is served, periodically (after the
session), etc. (Yet to be implemented).
If the image is used only one per request, i.e., a new image per request
(such as the images with one-time security code for registration), a Servlet
has to be incorporated to stream the generated image and then delete it
immediately or after the session. For these cases the HTML <img> tag "src"
should point to the Servlet.
We could also have periodic sweeps.

4. Transformations currently included

The children of the <image> tag can be a set of transformation tags such

a. resize 	-- 	scales the image by a percentage
			or by final width and height. Thus it
			supports differential scaling
			(i.e., scaleX != scaleY)

b. grayscale -- 	convert a color image to grayscale.

c. rotate	-- 	rotate the image by some degrees.

d. crop	-- 	get a sub-image from the rectangle specified in
			percentage or absolute pixels.

e. border	-- 	add a colored border to the image.

f. overlay	-- 	places a new image specified by "name"
			or by source url, on top of parent
			image at a specified point.
			Transparency effect can be added by
			specifying a "color"
			That color will be considered as a
			transparent area.

g. text	-- 	writes a string/ text on the image in
			the color and font at a given point.

These tags can be combined and used in any order to get the desired effect.
Such as crop, scale, grayscale and overlay. The overlay is useful to add
tags like "SOLD", "NEW", etc., to a product image. Text can be used to add
copyright information to images. Grayscale and Resize can be used to
generate thumbnail images. There are numerous ways to use them in
combination. Take a look at the samples.

5. Software Requirements
I tested it on Tomcat 4.1.

Currently the tags use Java2D (with ImageIO) OR Java Advanced Imaging API
(JAI). Same functionality using SVG, SWT, etc can be added later. On a
server without a graphics environment, the "java.awt.headless=true" option
should be set (I am not sure if it is required for a library like SWT).

Since Java2D loads only GIF, JPEG and BMP images, the new ImageIO is used.
Hence now it needs: -
J2SDK-1.4 and above
J2SDK-1.2 and above with ImageIO jar
J2SDK-1.2 and above with JAI jars
(The attribute "ImageTag.imagingType" has to be set to JAI").

The Tag library uses a small wrapper lib PMIW - Poor Man's Imaging Wrapper
:-) as well.
I developed this wrapper to expose a very simple interface for imaging
functions using Java2D or JAI or SWT. This is distributed under the Apache
software license. I am using it for the taglib and ANT Image tasks that I am
I have included it in the sample war file.

6. An example

Overlay a transparent image on a Grayscaled image and then Resize it (PNG on

<img:image src="/images/splash.jpg" name="gr.jpg" refresh="true"
  <img:overlay x="2%" y="2%" src="/images/new.png" />
  <img:resize scale = "70%" />

a. "splash.jpg" is loaded since the "refresh" is set to "true". Otherwise it
checks for gr.jpg in the default ("gen-images") directory and loads it.
b. The image is converted to grayscale.
c. The "new.png" is painted on the parent image at location 2% right and 2%
below the top-left corner.
d. The image is resized/scaled to 70% its current size.
e. The image is saved as "gr.jpg".

You can find this sample when you run the sample. However I have attached
the output of this example as well (gr.jpg 7KB)

7. More to do

a. Other tags that can be added are "SVG", "ShapeOverlay", "Brightness",
"Contrast", "Threshold", "Tile", etc.

b. The various ways of deleting the image files need to be implemented.
Currently only delete-on-exit is implemented.

c. Implementations based on SWT or some native library that might not have
"headless" issues.

d. Support for GIF file writing using ACME or similar libraries.

It would be nice if someone could put it up on a JSP server for others to
Let me know your thoughts. I need some help to structure it for the
Also let me know how to explain it better.


Abey Mullassery

  • Unnamed multipart/mixed (inline, None, 0 bytes)
View raw message