Drawing inline disabled images in ASP.NET

Introduction

While creating an ASP.NET application, I needed to have the images on my image buttons reflect it's enabled or disabled state. To do this, I needed to have two copies of my image saved on the web server, one for it's enabled state, the other for it's disabled state. But then, it occurred to me that if I changed the images used, I would have to render a separate "disabled" image for each. Well, this wasn't going to work, so I set about a different method to render "disabled" images into my disabled image buttons. I thought this was kind of interesting, so I decided to share it with others.

The rendering code

Rendering the disabled image is easy. Instead of using the original URL of the image, simply replace it with the page that contains the code below, and place the original image's URL into a query string item name imageurl. For example, replace http://localhost/images/lookup.gif with http://localhost/drawdisabled.aspx?imageurl=http://localhost/images/lookup&disable=true. A value for "disable" of anything other than TRUE will return the original image.

An example of how to use this would be:

imagebutton1.ImageUrl= _
    string.format("<A href='http://localhost/drawdisabled.aspx?" + _
    "imageurl={0}&disable={1}", _
    PathToImage, imagebutton1.enabled.tostring" + _
    ">http://localhost/drawdisabled.aspx?" + _
    "imageurl={0}&disable={1}", _
    PathToImage, imagebutton1.enabled.tostring</A>)

How it works

The ASP page loads in the original image, renders it to an internal bitmap (in case it's palletized, because the controlpaint method does not work on color-indexed images - otherwise it throws an exception), then uses the controlpaint class to draw it in it's disabled state to the new bitmap. The new bitmap is then inserted as a MIME type in the response stream that is then sent to the browser. Using this method, you could actually implement real-time image manipulation without relying on other software to pre-render the image (such as embossing, etc., there is an excellent article here on CodeProject that describes how to do these things - these can be applied to web images now)

The source code for drawdisabled.aspx is listed below. Don't forget to add a reference to the System.Windows.Forms.dll to the project.

Imports System.Net
Imports System.Drawing
Imports System.Windows.Forms
Imports System.Windows

Public Class DrawDisabled Inherits System.Web.UI.Page
Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
    
    'Put user code to initialize the page here
    If Not Me.Request.QueryString.Item("imageurl") Is Nothing Then
        If Not Me.Request.QueryString.Item("imageurl").Length = 0 Then
            Try
                Dim wr As WebRequest = _
                  WebRequest.Create(Me.Request.QueryString.Item("imageurl"))
                Dim resp As WebResponse = wr.GetResponse
                Dim willy As New Bitmap(resp.GetResponseStream)
                Dim hires As New Bitmap(willy.Width, willy.Height)
                Dim converted As Graphics = Graphics.FromImage(hires)

                converted.DrawImage(willy, 0, 0)
                If Boolean.Parse_
                   (Me.Request.QueryString.Item("disable")) = True Then
                      ControlPaint.DrawImageDisabled_
                        (converted, willy, 0, 0, Color.Empty)
                End If
                hires.Save(Response.OutputStream, _
                   System.Drawing.Imaging.ImageFormat.Jpeg)
                converted.Dispose()
            Catch
            End Try
        End If
    End If
End Sub
End Class