Make Your Icons Spiffy With Image Overlays

In Windows, it is very common to see an icon that has an image overlayed on top of it to designate something special. For example, when you create a shortcut to another location, you get that nice white box with the curvy arrow that says to you “this is just a shortcut, not an actual document.” On the web, this type of thing can also be very useful in your UI, but achiving the effect with Javascript or layers can be a pain. In our CMS UI, we needed a way to designate which documents in lists were merely shortcuts or overlay different status info on top of icons. If you run into a case like this, here is some code to get you started (note, you probably want to add caching, etc. to this):

1using System;
2using System.IO;
3using System.Web;
4using System.Drawing;
7
8namespace SomethingHere
9{
10 
11 public class ImageOverlayRequestHandler : IHttpHandler
12 {
13  public ImageOverlayRequestHandler()
14  {
15  }
16
17  void WriteOverlayedImage(Stream s, string imageUrl, string overlayImageUrl)
18  {
19   string imagePath = HttpContext.Current.Server.MapPath(imageUrl);
20   string overlayImagePath = HttpContext.Current.Server.MapPath(overlayImageUrl);
21
22   using(System.Drawing.Image image = System.Drawing.Bitmap.FromFile(imagePath))
23   {
24    using(Bitmap tmpBitmap = new Bitmap(image.Width, image.Height))
25    {
26     using(Graphics g = Graphics.FromImage(tmpBitmap))
27     {
28      g.DrawImage(image, 0, 0);
29      using(System.Drawing.Image overlayImage = System.Drawing.Image.FromFile(overlayImagePath))
30      {
31       g.DrawImage(overlayImage, image.Width - overlayImage.Width, image.Height - overlayImage.Height);
32      }
33      tmpBitmap.Save(s, System.Drawing.Imaging.ImageFormat.Png);      
34     }
35    }
36   }    
37  }
38  #region IHttpHandler Members   ...
39
40
41  public void ProcessRequest(HttpContext context)
42  {
43   string image1Url = HttpUtility.UrlDecode(context.Request["Image1"]);
44   string image2Url = HttpUtility.UrlDecode(context.Request["Image2"]);   
45
46   MemoryStream tmpStream = new MemoryStream();
47   WriteOverlayedImage(tmpStream, image1Url, image2Url);
48      
49   byte[] buffer = tmpStream.GetBuffer();     
50   context.Response.ContentType = "image/png";
51   context.Response.OutputStream.Write(buffer, 0, buffer.Length);
52  }
53
54  public bool IsReusable
55  {
56   get
57   {
58    return true;
59   }
60  }
61  #endregion
62 }
63}
64

And a web control to make it easy for you:

1using System;
2using System.Web;
3using System.Drawing;
5using System.Web.UI.WebControls;
6
7namespace YourWebControlNamespace
8{
9 public class OverlayImage : System.Web.UI.WebControls.Image
10 {
11  public OverlayImage()
12  {
13  }
14
15  string _overlayImageUrl;
16  public string OverlayImageUrl
17  {
18   get
19   {
20    return _overlayImageUrl;
21   }
22   set
23   {
24    _overlayImageUrl = value;
25   }
26  }
36  protected override void Render(System.Web.UI.HtmlTextWriter writer)
37  {
38   string _orgUrl = ImageUrl;
39
40   if(OverlayImageUrl != null && OverlayImageUrl != "")
41   {
42    ImageUrl = "GetOverlayedImage.ashx?Image1="+HttpUtility.UrlEncode(ImageUrl)+"&Image2="+HttpUtility.UrlEncode(OverlayImageUrl);
43   }
44
45   base.Render (writer);
46
47   ImageUrl = _orgUrl;
48  }
49
50 }
51}