Recently I was asked to make some revisions to a client's web-based online course presentation software. One of the areas was in the course design section where there needed to be a listing of all the image files in a selected directory. They wanted the current display of a stock image for the type of file (gif, jpeg) to be replaced with actual thumbnails of each images to make it easier to see what you are working with.

I immediately thought of using an ASHX webhandler and searched my filesystem for something I had worked on before. It turned out that with only minor modifications, I was able to re-use some code I had experimented with in order to provide the option to either serve the actual image, or just a sized thumbnail of same.

ASHX files are WebHandlers that derive from IHttpHandler. Their advantages are mainly that you can gain access to the HttpContext without all the baggage of the Page class. These classes have only two required methods - ProcessRequest, which accepts an HttpContext parameter, and the boolean IsReusable. In short, ASHX files let you create an HTTP endpoint that can return any content type that you want. And, with ASHX, there is no requirement for registration in web.config or machine.config - you just drop them into your project and they are usable "out of the box".

Here's the code for my "keep it simple" Thumbnail image generator:

<%@ WebHandler Language="C#" Class="ThumbnailHandler" %>
using System;
using System.IO;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
public class ThumbnailHandler : IHttpHandler
{
    public void ProcessRequest (HttpContext context)
   {   
      int _width=0;
   int _height=0;
   string _path=String.Empty;
    if(context.Request["width"]!=null)
     _width = Int32.Parse(context.Request["width"]);
    else 
    {     
     { _width=30; }
    }
    if(context.Request["height"]!=null)
     _height = Int32.Parse(context.Request["height"]);
    else 
    {     
     { _height=30; }
    }
    // get path for 'no thumbnail' image if you want one
    const String NoThumbFile = "nothumb.jpg";  
    String sNoThumbPath = context.Request.MapPath(
     context.Request.ApplicationPath.TrimEnd('/') + "/images/" + NoThumbFile);
    // map requested path
    if(context.Request["ImgFilePath"]!=null)
    _path = context.Request.MapPath(context.Request["ImgFilePath"]);
    else _path = sNoThumbPath;  
    
  Bitmap thumbBitmap;   
  thumbBitmap= new Bitmap(_path);
   if(thumbBitmap==null)
   { 
   thumbBitmap=new Bitmap(sNoThumbPath);
   }      

   if(context.Request["thumb"]!=null && context.Request["thumb"]=="no")
     {
    context.Response.ContentType = "image/Jpeg";
    thumbBitmap.Save (context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);   
    }
    else
    {     
      
    thumbBitmap = (Bitmap)thumbBitmap.GetThumbnailImage(_width, _height,
    new System.Drawing.Image.GetThumbnailImageAbort(ThumbCallback),IntPtr.Zero);   
   context.Response.ContentType = "image/Jpeg";
    thumbBitmap.Save (context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);    }
}

  public bool ThumbCallback() { return false; }   
    
    public bool IsReusable
    {
        get { return true; }
    }
}

To use this, all we need to do is have an image tag where the src property points to the ASHX file, along with the required querystring parameters. Mine are ImgFilePath, width, height, and an optional thumb=no which tells the handler to not create a thumbnail, just serve the full-size image. To create the actual Thumbnails, we can use the built-in Bitmap.GetThumbnailImage method which requires a GetThumbnailImageAbort callback that can simply return false.

The downloadable source project has an /images folder with a bunch of images I threw in there to illustrate how it works, along with a Default.apx page that iterates all the files in the images folder and creates the img links in a table as a "proof of concept"

Download the VS.NET 2003 Solution that accompanies this article