Code Globe: February 2011

There are several situations in website development that deals with images and to display it in Thumbnail sizes. Its really hectic to display the thumbnail images without any distortion and to maintain the quality same as the original image is not also easy. So this article is contributed to those web programmers struggling to create thumbnail images using several logics. This article explains the two ways of creating thumbnail images, which we considered the best.

To upload images to the server, we need a File Upload control and a button control. Asp.Net simplifies the process of uploading images to the server with the FileUpload control. To start with, place a FileUpload control and a button control on your webpage. For readability, change the text of the button control as ‘Upload’.

Method 1:

In this method, we are going to use Size Structure class library. It is a .NET class library structure, stores an ordered pair of integers, normally the width and height of a rectangle. By using this Size Structure we are going to scale the original image, to its appropriate thumbnail size without any disturbances in the quality of the thumbnail image. Size structure class library is available in System.Drawing namespace.

To achieve this, we have a write a general method called ‘NewImageSize’. This method takes 3 parameters such as the original height, original width of the original image and the target thumbnail size you want to resize the original image.

public Size NewImageSize(int OriginalHeight, int OriginalWidth, double FormatSize)
{
Size NewSize;
double tempval;

if (OriginalHeight > FormatSize && OriginalWidth > FormatSize)
{
if (OriginalHeight > OriginalWidth)
tempval = FormatSize / Convert.ToDouble(OriginalHeight);
else
tempval = FormatSize / Convert.ToDouble(OriginalWidth);

NewSize = new Size(Convert.ToInt32(tempval * OriginalWidth), Convert.ToInt32(tempval * OriginalHeight));
}
else
NewSize = new Size(OriginalWidth, OriginalHeight); return NewSize;
}

By passing those parameters, the above method will be proportionately scale the original image and returns the exact size of the thumbnail. We can use this new size to create the thumbnail images and store it in the server.

In the click event of the Upload button, write the following code.

if (FileUpload1.PostedFile != null)
{
string ImageName ="SampleImage.jpg";
FileUpload1.SaveAs(Server.MapPath("Images\\") + ImageName);
string ThumbnailPath = (Server.MapPath("ThumbnailImages\\") + ImageName;

using (System.Drawing.Image Img =
System.Drawing.Image.FromFile(Server.MapPath("Images\\") + ImageName))
{
Size ThumbNailSize = NewImageSize(Img.Height, Img.Width, 150);

using (System.Drawing.Image ImgThnail =
new Bitmap(Img, ThumbNailSize.Width, ThumbNailSize.Height))
{
ImgThnail.Save(ThumbnailPath, Img.RawFormat);
ImgThnail.Dispose();
}
Img.Dispose();
}

Here we take the image path from the FileUpload control and save the original image inside “Images” folder. Then we declare another path to save the thumbnail image.

To know the original height and width of the Original Image, we have to create an Image instance and load it by using the ‘FromFile’ method. Passes the Height and Width to the NewImageSize method along with your desired Thumbnail size in pixel. In the above code, the thumbnail size is 150 pixels height and width.

So the proportionate thumbnail size will be returned to ThumbnailSize Size Structure. Now the Original Image and the size for the thumbnail is ready with us. Last we are going to create another Image object as ImgThnail, which is initialized as a BitMap Image with the Height and Width of the Thumbnail size. Now call the Save method of the ImgThnail object, to store the Thumbnail Image in its appropriate size and location. Finally, call Dispose method, this will release the all the resources used by the Image objects.

Method 2:

The second method is by using the GetThumbnailImage method of the Image class. This method returns the thumbnail image for the given original image. The syntax for this method is

public Image GetThumbnailImage
(
int thumbnail_Width,
int thumbnail_Height,
delegate GetThumbnailImageAbort callback,
IntPtr callbackData
)

The GetThumbnailImage method takes 4 parameters such as the width of the thumbnail, height of the thumbnail image in pixels, an unused delegate and a handle or pointer that must be always Zero. This method retrieves the original image, creates a thumbnail by scaling the original image.

To create thumbnail by this method, first we to have to create a dummy delegate function, which always return false value. The syntax for the delegate function is as follows

public bool ThumbnailCallback()
{
return false;
}

Then in the Upload button’s click event write the following code.

if (FileUpload1.PostedFile != null)
{
string ImageName =”SampleImage.jpg”;
FileUpload1.SaveAs(Server.MapPath("Images\\") + ImageName);

string ThumbnailPath = (Server.MapPath("ThumbnailImages\\") + ImageName;
System.Drawing.Image.GetThumbnailImageAbort myCallback =
new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);

using(System.Drawing.Image TargetImage =
System.Drawing.Image.FromFile(Server.MapPath("Images\\") + FileName))
{
using (System.Drawing.Image Thumbnail =
TargetImage.GetThumbnailImage(100, 200, myCallback, IntPtr.Zero))
{
Thumbnail.Save(Server.MapPath("Images\\") + ImageName);
Thumbnail.Dispose();
}
TargetImage.Dispose();
}
}

By using the FileUpload control’s Save method, we store the original image in the Server. Then we are creating a CallBack delegate by using GetThumbnailImageAbort method. This method provides a callback to the Delegate ThumbnailCallback, when the GetThumbnailImage stops its execution in a premature state. If this happens it will return a true value else it will return always false. Might be it is beyond the scope of this article, we shall leave it here.

Next we are create 2 Image objects such as TargetImage and Thumbnail. The first one TargetImage is to retrieve the original Image and the second Thumbnail is to create Thumbnail Image. Call the GetThumbnailImage method of the Thumbnail object to create a thumbnail image by passing the parameters such as width, height, dummy delegate callback and a handle with Zero value. By calling the Save method of the Thumbnail Image object, we can create thumbnail. Finally we call the Dispose method, to release the resources used by our Image objects.

Point to Remember:

If you look carefully in the above block of codes in both the methods, we are creating the all Image objects within a ‘using’ statement. What does this really do?

The answer is simple. The using statement ensures that Dispose method is called without failure. Eventhough we don’t call Dispose explicitly, it is enough to enclose the statement with the using statement. The purpose of using it here is that we create Image objects and access Images that is stored in the server location. So after using the Images, if do not release it completely than it will create some Exceptions. In other case, if an Exception occurs in intermediate of the Image processing, then the .NET framework cannot release the resources used by the Image object. It will raise an Exception as follows

”The process cannot access the file because it is being used by another process.”

So when you enclose the Image objects between using statement, then the Images and other files used within the using statement block will be released perfectly even though exception is raised. So we always recommend you to use using statement.

The information provided in this article is only simple methods of creating thumbnail images at run-time or on fly. But there can be other methods, which will create thumbnail with simple technique and excellent quality. So we request our readers to provide them to us, so as to help other novice Asp.Net developers.

Code Globe

Pages

HTML & Javascript Way2Sms Api.....

Create Thumbnail Of A Image C#

C++ Challenges

Telerik

Some Good Snippets

Pageviews

Blog Archive

Followers

Know More

My Motto