David Cilley's AJAX Imaging Blog : PNG

Non-Rectangular Masks on the Web: Part 1

David Cilley — Fri, 04 Apr 2008 19:45:00 GMT

Over the past 15 or so years, I've edited and created a thousands of images. I almost always use a mask for something, and it's very rarely only rectangular. I have a need for doing this on the web, natively in the browser, and I might not be the only one.

With JavaScript and the DOM, you can create a series rectangles that represent masks, but as the complexity of these masks go up, the number of DOM objects that need to be created go up. This can make it slow to render, and slow to update.

Most of the browsers used today show PNG images with an alpha channel(transparency) correctly. PNG images with an alpha channel can be used to mimic a client side mask by placing them on top of the object that you want to mask. The image to the right is one of these PNG images, with a JPG image behind it. There are three things you need to do to create a masking PNG image:

Create an image with a background color of your choice, at the size of the object you are masking.
Make the areas you want selected completely transparent on the alpha channel (Black).
Make the rest of the image half transparent on the alpha channel (Gray).

The remaining parts that you will need will be some JavaScript mouse events that allow you to drag a box on the object (something like a selection marquee), and a server side method that will create the PNG image described above.

Since I have access to DotImage, I can use the WebAnnotationViewer and RemoteInvoke to do everything. In my case I decided to use a ReferencedImage annotation to hold the alpha PNG. Here's a basic run down of the concept, using DotImage:

Use the WebAnnotationViewer's Selection box to select an area on the image, and attach a JavaScript event to the Selection.Changed. (MaskSelection In this example)
In the Selection.Changed JavaScript event, use RemoteInvoke to run a Page level server side method that creates the masked PNG image from the selection box. (Remote_MaskSelection in this example)
The server side method keeps two images in the disk cache. One for the masked areas drawn, and one for the transparent PNG that represents those masked areas.
Every time the server side method is called it overwrites these images with the new data from selection rectangle of the WebAnnotationViewer, effectively appending what was selected to the new mask.
The mask image is an 8-bit grayscale which starts out completely gray (color index 127) to indicate half transparent. Areas that are selected are drawn onto this image as black (index 0).
The alpha PNG image is a 32-bit RGBA image with a background color (red in this case), and a SetAlphaFromMaskCommand is used to put the mask image into the alpha channel of this new PNG
The alpha PNG is then added to an annotation on the server side, and the client side JavaScript is notified that it needs to update the annotation.

Here is the code I used to create the mask image and the alpha PNG:

private void SynchronizeMaskAnnotation(Size size)
{
// This annotation was created on PageLoad, and is the only one on layer 0
AnnotationUI ann = this.WebAnnotationViewer1.Annotations.GetAnnotation(0, -1, 0);

ReferencedImageAnnotation refAnn = ann as ReferencedImageAnnotation;
if (refAnn != null)
{
refAnn.Size = size;

ReferencedImageData refAnnData = refAnn.Data as ReferencedImageData;
if (refAnnData != null)
{
if (refAnnData.ImageObject != null)
{
((Bitmap)refAnnData.ImageObject).Dispose();
GC.Collect(); // This is done because the .NET Bitmap class doesn't free the file in time for us to write over it
}
}
}

this.WebAnnotationViewer1.UpdateAnnotations();
}

private void AppendMask()
{
string _pathToCache = System.Configuration.ConfigurationManager.AppSettings["AtalasoftWebControls_Cache"];
string _prefix = Page.Session.SessionID + "_";
string _pathToMask = this._pathToCache + _prefix + "Mask.png";
string _pathToMaskAnn = this._pathToCache + _prefix + "MaskAnn.png";

AtalaImage maskImage = null;
AtalaImage alphaPNG = null;

try
{
if (File.Exists(Page.MapPath(_pathToMask)))
maskImage = new AtalaImage(Page.MapPath(_pathToMask));
else
maskImage = new AtalaImage(this.WebAnnotationViewer1.Image.Size.Width, this.WebAnnotationViewer1.Image.Size.Height, PixelFormat.Pixel8bppGrayscale, Color.Gray);

alphaPNG = new AtalaImage(maskImage.Width, maskImage.Height, PixelFormat.Pixel32bppBgra, Color.Red);

Canvas maskCanvas = new Canvas(maskImage);
maskCanvas.DrawRectangle(this.WebAnnotationViewer1.Selection.Rectangle, new SolidFill(Color.Black));

SetAlphaFromMaskCommand alpha = new SetAlphaFromMaskCommand(maskImage, false, AlphaMergeType.Replace);
ImageResults results = alpha.Apply(alphaPNG);
if (alphaPNG != results.Image)
{
alphaPNG.Dispose();
alphaPNG = results.Image;
}

SynchronizeMaskAnnotation(alphaPNG.Size);

maskImage.Save(Page.MapPath(_pathToMask), new PngEncoder(), null);
alphaPNG.Save(Page.MapPath(_pathToMaskAnn), new PngEncoder(), null);
}
finally
{
if (maskImage != null)
maskImage.Dispose();
if (alphaPNG != null)
alphaPNG.Dispose();
}
}

IE7 DXImageTransform and PNG transparency problem

David Cilley — Wed, 14 Mar 2007 14:35:00 GMT

Recently I was tasked with creating a spiffy demo for our new AJAX Annotations control and I ran across an interesting problem. For reference, I am creating a demo that looks and behaves much like the AJAX Multipage Tiff Demo, with all the transparent PNG goodness that we can now take advantage of in IE7.

Since the default doctype in VS 2005 is XHTML 1.0 Transitional, I decided now is a good time for me see how easy or difficult using this doctype can be. Primarily I have been sticking to HTML 4.0, because it's a heck of a lot easier to get your nested tables fitting to percentage based height and width.

Switching to this doctype caused a few minor problems, but the biggest one that I noticed was this:

What you are seeing here is the bottom right corner of the image I am attempting to use like a modal dialog background (the demo mentioned above shows how this is used). This image is originally 150x150 pixels, and has been stretched to fit the browser's available area.

It's supposed to look like this:

So now I bet you're wondering the same thing I was. What am I doing wrong on the page that's causing this? The first thing I thought, was the doctype change. This didn't fix the problem. Then I figured that I must be using the old IE transparent PNG hack that's I've covered in previous posts. Nope, not using it in this app. However, I did find a DXImageTransform filter in one of the underlying IFrames. Once I got rid of the DXImageTransform, the problem went away.

In my tests, regardless of doctype, this problem can show up if you are using any DXImageTransform filters on any object on any of the frames currently loaded into the browser window. It seems to show up less if the PNG images are not overlapping any other objects, although I haven't been able to pinpoint exactly which cases are ok.

I have created a test html page that demonstrates this problem. When you first load the page, the PNG image shows up correctly. Once you click one of the buttons (using IE7 and Windows XP) the PNG image becomes blurred on the bottom and the right of the image.

PNG Transparency in Internet Explorer Revisited

David Cilley — Wed, 10 May 2006 19:09:00 GMT

There have been countless times where I have made user interfaces that were easily customizable using style sheets. Usually the graphics were generic enough so that you could change the colors without making it look too bad. Then there are the interfaces with the drop shadows, overlays, and other semi-transparent areas which would cause headaches when trying to mimic in IE.

Recently I was tasked with creating a slick looking AJAX demo app, and I do so much development in FireFox, I had forgotten that IE still doesn't handle the alpha channel well. I had already created most of the graphics using png's with alpha transparency, and I didn't want to remake everything. So I Googled around the net looking for a simple solution, but most solutions required using extra event handlers for each image tag's onload, or something similar. I'm somewhat lazy, and I don't want to have to add an attribute to all my image tags.

I tinkered around a bit, and found a relatively easy way to get it to work. The only thing you have to do is make sure that your png image tags have the width and height attributes defined.

Here's a solution I came up with:

window.onload = OnPageLoad;

function OnPageLoad(){
   if (document.all)
      fixPngs();
}

// Loops through all img tags
function fixPngs(){
   for (i = 0; i < document.images.length; i++){
      var s = document.images[i].src;
      if (s.indexOf('.png') > 0)  // Checks for the .png extension
         fixPng(s, document.images[i]);
   }
}

// u = url of the image
// o = image object
function fixPng(u, o){
   o.src = 'spacer.gif';  // Need to give it an image so we don't get the red x
   o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
}