Generate Thumbnail Image

As part of our developer career we came across displaying user’s uploaded image onto the web page. This is the most common requirement when working for a photo manager site like Picasa or SnapFish or social networking domain.

Displaying image on a web page is not a big issue. However when considering the page performance we need to count if there are too many images within the page and most importantly the size of the image (good when in KB and worst in MB)

The worst scenario is when the end user uploads a photo which is of very high resolution say approximately ~2 - 4 MB in size.

To improve the page performance we either need to restrict user not to upload high resolution images or handle user’s images to render out thumbnail images which eventually occupy less weight on the page.

We have a technique in Asp.net to generate thumbnail images. We generally use "GetThumbnailImage" method of Bitmap class to generate thumbnail image of any size.

The following code snippet will generate thumbnail image as response header provided original image's binary stream and expecting thumbnail image width and height:

private void GetThumbnailImage(byte[] objByteStream, int intWidth, int intHeight)

{

byte[] image = (byte[])objByteStream;

System.Drawing.Bitmap uploadedimage = new System.Drawing.Bitmap(convertByteArrayToStream(image));

System.Drawing.Bitmap b = resizeImage(uploadedimage, intWidth, intHeight);

System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);

System.Drawing.Image thumbNailImg = uploadedimage.GetThumbnailImage(b.Width, b.Height, dummyCallBack, IntPtr.Zero);

MemoryStream mstream = new MemoryStream();

thumbNailImg.Save(mstream, ImageFormat.Jpeg);

byte[] image2 = mstream.ToArray();

HttpContext.Current.Response.ContentType = "image/jpeg";

HttpContext.Current.Response.BinaryWrite(image2);

}

All we need is to create a handler class (.ashx) to render the newly generated thumnbail image back to the page.