Click here to Skip to main content
Click here to Skip to main content

Thumbnail using C# .NET

, 7 Sep 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Creating image thumbnail using C# .NET, useful in web applications.

Introduction

This tutorial will show you how to generate image thumbnails dynamically from an original big image.

Background

Many of the web developers will show the big images as small by giving the attribute values for the image tag. This will slow down the webpage loading. For better performance the best method is creating the small thumbnail images for showing small size image on the web pages. But for every upload of the images by the user we cannot create a thumbnail image, it’s a tedious process. I planed to create a method which will create a thumbnail automatically while the image upload and saves in a separate path. This is a light weight process and easy to use. The only thing is you have to add one more filed for saving the thumbnail image path while dealing with databases.

Following are the features of this technique.

  • Good quality.
  • Desired thumbnail size.

Using the Code

Below is the method which will generates the thumbnail and saves to the destination folder.

public void GenerateThumbNail(string sourcefile, string destinationfile,int width)
{
    System.Drawing.Image image = 
       System.Drawing.Image.FromFile(Server.MapPath(sourcefile));
    int srcWidth = image.Width;
    int srcHeight = image.Height;
    int thumbWidth = width;
    int thumbHeight;
    Bitmap bmp;
    if (srcHeight > srcWidth)
    {
        thumbHeight = (srcHeight / srcWidth) * thumbWidth;
        bmp = new Bitmap(thumbWidth, thumbHeight);
    }
    else
    {
        thumbHeight = thumbWidth;
        thumbWidth = (srcWidth / srcHeight) * thumbHeight;
        bmp = new Bitmap(thumbWidth, thumbHeight);
    }

    System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
    gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
    gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
    gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
    System.Drawing.Rectangle rectDestination = 
           new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
    gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
    bmp.Save(Server.MapPath(destinationfile));
    bmp.Dispose();
    image.Dispose();
}

In the above method we are passing three parameters first one is the soruce location of the image and the second one is the destination location of the image and the third parameter is the width. At first we need to include two namespaces.

using System.Drawing;
using System.Drawing.Drawing2D;

Then create an instance image from the source file as follows

System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(sourcefile));

After getting the image height and width using the instance of the image we need to set the targetted thumbnail image’s height and width. Create and instance for the bitmap. By using the below logic we can get the width and height of the targetted thumbnail. Set the thumbnails’s width and height to the bitmap.

Bitmap bmp;
if (srcHeight > srcWidth)
{
    thumbHeight = (srcHeight / srcWidth) * thumbWidth;
    bmp = new Bitmap(thumbWidth, thumbHeight);
}
else
{
    thumbHeight = thumbWidth;
    thumbWidth = (srcWidth / srcHeight) * thumbHeight;
    bmp = new Bitmap(thumbWidth, thumbHeight);
}

After this for creating the high quality thumbnails create an instance for the Graphics class with the bitmap. Set the SmoothingMode and CompositingQuality to HighQuality and InterpolationMode to Hign. Then draw a rectangle with the thumbnail’s height and width using the rectangle class and place the image inside the rectangle using the DrawImage class. Now the bitmap image i.e., thumbnail image is ready. Now save the thumbnail the the destination location using bmp.save(/*destination location*/) method.

I think mostly this example will help in website development for loading webpages fast with small images instead of loading large image with small sizes.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


Comments and Discussions

 
QuestionAnother solution PinmemberZamirF28-Aug-12 11:30 
QuestionHTTP Error 400 - Bad Request. [modified] PinmemberAbdo5863-May-12 15:03 
QuestionIts all good PinmemberHaBiX9-Sep-11 0:51 
GeneralMy vote of 3 Pinmembersaxenaabhi67-Sep-11 16:22 
GeneralRe: My vote of 3 PinmemberDan Mordechay7-Sep-11 23:54 
Question"think mostly this example will help in website development for loading webpages fast with small images instead of loading large image with small sizes." Pinmembercrocks2567-Sep-11 5:37 
AnswerRe: "think mostly this example will help in website development for loading webpages fast with small images instead of loading large image with small sizes." Pinmembersupernova56667-Sep-11 6:15 
GeneralRe: "think mostly this example will help in website development for loading webpages fast with small images instead of loading large image with small sizes." PinmemberR.DileepKumar24-Jan-12 23:54 
AnswerRe: "think mostly this example will help in website development for loading webpages fast with small images instead of loading large image with small sizes." PinmemberR.DileepKumar8-Sep-11 0:19 
GeneralRe: "think mostly this example will help in website development for loading webpages fast with small images instead of loading large image with small sizes." PinmemberHaBiX12-Sep-11 23:59 
GeneralMy vote of 1 Pinmembercrocks2567-Sep-11 5:35 
GeneralRe: My vote of 1 PinmemberR.DileepKumar8-Sep-11 0:16 
GeneralRe: My vote of 1 PinmemberR.DileepKumar13-Sep-11 1:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 7 Sep 2011
Article Copyright 2011 by R.DileepKumar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid