An Image converter for DWR

If you know DWR, you should be confortable with the concept of converters. They, more or less, are classes used by the framework to parse Java objects and transform them into valid Javascript objects & JSON. The framework provides out-of-the-box the most usual ones, like bean, array or list. Unfortunately it lacks the power to convert binary objects like images or PDFs.

Time and again during project development I've found that a lot of work is done or is based on documents. There's always the option to revert to traditional web requests and withdraw AJAX but it seems you can do better. One of the powerful extensions offered by DWR are custom converters where a developer may implement a converter for a specific task and add it to the flow.

But there was a reason why images were not supported in DWR and it was cross-platform Javascript. Let's review what methods can be used to define an image in a page

• Using the image (<img>) tag and setting an URL as the source
  <img src="http://..." alt="" />
• Using the <object> tag. Very similar to the image tag but IE adds vertical and horizontal scroll bars what makes it unacceptable
• Using the image tag and the data URL schema. This would be the most preferable method but IE does not yet support (and probably never will) this type of URL (even though they are actually a stardard).
  <img src="data:image/png;base64,..." alt="..."/>
• Using the Javascript Image object. It has the same properties and functionality of the corresponding tag.

From the list above it's easy to come to a conclusion, IE will be problematic. It does not support inline images and gives problems with several other approaches. After some research I could only find a solution that may work in IE. It was developed by Benn Herrera a couple of years ago and barring MHT it's the only working code for IE. It relies on RLE compression and HTML tables to create a markup that should work in any browser. The method is costly though so we will only use it for Explorer.

With the method defined creating a converter is easy. Images can be mapped from multiple sources (byte[], URL, ...) but I will parse java.awt.image.BufferedImage for two reasons. The first one is that it allows to retrieve external images (one thing I need for a project as AJAX will serve as a Proxy there) and the other is that the code Benn wrote needs one.

The code is very simple (it's just an skeleton that anyone can use to fit his needs):

ByteArrayOutputStream stream = new ByteArrayOutputStream();
String result;
if ("IE".equals(img.getBrowser())) {
   JSImage jsImage = new JSImage(image);
   jsImage.setCreateColorPalette(true);
   jsImage.serialize(stream, true);
} else {
   ImageIO.write(image, defaultFormat, stream);
}
byte[] unencoded = stream.toByteArray();
String unenc = new String(unencoded, "iso-8859-1");
result = new String(Base64.encodeBase64(unencoded));

Of course, it uses Benn's code (JSImage) to create the RLE image (and jsImage.js to parse it in the client).

function call() {
   ImageConverter.getImage(browserType, "[URL]", callback);
}

function callback(data) {
   if (browserType == "FF") document.getElementById("imgcontainer").innerHTML =
            "<img src='data:image/png;base64," + data + "'>";
   if (browserType == "IE") {
      var decoded = decode64(data);
      var jsarr = decoded.split(",");
      jsarr[1] = eval(jsarr[1]);
      jsarr[2] = eval(jsarr[2]);
      jsarr[3] = eval(jsarr[3]);
      jsarr[4] = eval(jsarr[4]);
      jsarr[5] = eval(jsarr[5]);
      jsarr[6] = eval(jsarr[6]);
      var jsim = new JSImage(jsarr[0],jsarr[1],jsarr[2],jsarr[3],jsarr[4],jsarr[5],
                                 jsarr[6],jsarr[7],jsarr[8]);
      imgContainer = document.getElementById( "imgcontainer" );
      jsim.display( imgContainer );
   }
}

The code has been posted to the DWR mailing list and I hope it may be added to DWR sometime after v2.0 is finally released.