Some times we need to show the thumbnail of images of big size in our Web pages. One way to do is, just simply use the same image and change the height and width of the image in HTML. Problem with this approach is, image may look blurry or with an uneven ration.

To avoid this problem, you simply create a small image called a thumbnail on the fly using GDI+.

What you have to do is just create a handler in your ASP.NET project and put the following code inside the handler. This code uses Image and Bitmap classes defined in GDI+ to create a small image and sets the quality and encoders of the image.

<%@ WebHandler Language="C#" Class="ThumbnailHandler" %>
using System;

using System.IO;

using System.Web;

using System.Drawing;

using System.Drawing.Imaging;

using System.Web.Caching;

using System.Configuration;

public class ThumbnailHandler : IHttpHandler

{

// ----- Variable declaration -------

int thumbWidth,thumbHeight; String _path;

bool bRefresh=true;

public void ProcessRequest (HttpContext context)

{

String sCacheKey;

bool bFoundInCache = false;

// by default

if(context.Request["Width"]!=null)

thumbWidth = Int32.Parse(context.Request["Width"]);

else {

try { thumbWidth = int.Parse(ConfigurationSettings.AppSettings["DefaultWidth"]); }

catch (ArgumentNullException ex) { thumbWidth = 50; }

}

if(context.Request["Height"]!=null)

thumbHeight = Int32.Parse(context.Request["Height"]);

else {

try { thumbHeight = int.Parse(ConfigurationSettings.AppSettings["DefaultHeight"]); }

catch (ArgumentNullException ex) { thumbHeight = 40; }

}

// get path of 'no thumbnail' image

const String NoThumbFile = "Images/noImageAvailable.jpg";

String sNoThumbPath = context.Request.MapPath(

context.Request.ApplicationPath.TrimEnd('/') + "/" + NoThumbFile);

// map requested path

if(context.Request["VFilePath"]!=null)

if (context.Request["VFilePath"].IndexOf(".jpeg") != -1 || context.Request["VFilePath"].IndexOf(".jpg") != -1 || context.Request["VFilePath"].IndexOf(".gif") != -1 || context.Request["VFilePath"].IndexOf(".bmp") != -1 || context.Request["VFilePath"].IndexOf(".png") != -1 || context.Request["VFilePath"].IndexOf(".JPEG") != -1 || context.Request["VFilePath"].IndexOf(".JPG") != -1 || context.Request["VFilePath"].IndexOf(".GIF") != -1 || context.Request["VFilePath"].IndexOf(".BMP") != -1 || context.Request["VFilePath"].IndexOf(".PNG") != -1)

_path = context.Request.MapPath(context.Request["VFilePath"]);

else

_path = sNoThumbPath;

//======================================

System.Drawing.Image image;

try

{

image = System.Drawing.Image.FromFile(_path);

}

catch (FileNotFoundException e)

{

image = System.Drawing.Image.FromFile(sNoThumbPath);

}

int srcWidth = image.Width;

int srcHeight = image.Height;

// if(srcHeight>srcWidth)

// thumbHeight=(srcHeight/srcWidth)*thumbWidth;

// else

// thumbHeight=(srcWidth/srcHeight)*thumbWidth;

System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(thumbWidth, (int)thumbHeight);

//- Create a System.Drawing.Graphics object from the Bitmap which we will use to draw the high quality scaled image

System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bitmap);

//- Set the System.Drawing.Graphics object property SmoothingMode to HighQuality

gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

//- Set the System.Drawing.Graphics object property CompositingQuality to HighQuality

gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;

//- Set the System.Drawing.Graphics object property InterpolationMode to High

gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

//- Draw the original image into the target Graphics object scaling to the desired width and height

System.Drawing.Rectangle rectDestination = new System.Drawing.Rectangle(0, 0, thumbWidth, (int)thumbHeight);

//Set Image codec of JPEG type, the index of JPEG codec is "1"

System.Drawing.Imaging.ImageCodecInfo codec = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()[1];

//Set the parameters for defining the quality of the thumbnail... here it is set to 100%

System.Drawing.Imaging.EncoderParameters eParams = new System.Drawing.Imaging.EncoderParameters(1);

eParams.Param[0] = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);

gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, System.Drawing.GraphicsUnit.Pixel);

//======================================

}

Save the above ASP.NET file as ThumbnailHandler.ashx.

Now your webpage is ready to shine with great quality thumbnails.

This is how you an use the above ASHX file.

1. For HTML image tag:

<img src="ThumbnailHandler.ashx?VFilePath=../image/Myimage.jpg & Height=230 & Width=340" alt="Thumbnailimage" />

2. For ASP.NET Image tag:

<asp:Image id="Image1" runat="server" ImageUrl="ThumbnailHandler.ashx?VFilePath=~/Images/Myimage.jpg & Height=230 & Width=340" AlternateText="Thumbnailimage" />

I think situation is more clear to you now so start using it and enjoy.

Give feedback to keep my article live.