Blue Theme Orange Theme Green Theme Red Theme
 
Home | Forums | Videos | Photos | Downloads | Blogs | E-Books | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Login Close
User Id:
Password:
 
Forgot Password
Forgot Username
Why Register
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
 Resources  
Close
 Our Network  
Close
Search :       Advanced Search »
Home » ASP.NET & Web Forms » How to make image thumbnail using ASP.NET(C#)

How to make image thumbnail using ASP.NET(C#)

This sample code shows you how to make image thumbnail in ASP.NET and C#.

Author Rank:
Technologies: .NET 2.0, ASP.NET 2.0,Visual C# .NET
Total downloads : 768
Total page views :  26197
Rating :
 3.2/5
This article has been rated :  5 times
   Print Read/Post comments Post a comment  Rate  
   Email to a friend  Bookmark  Similar Articles  Author's other articles  
Download Files:
ImageThumbnail.zip
 
Become a Sponsor




The GetThumbnailImage method of the Bitmap class in GDI+ and C# is used to create a small thumbnail image of a lange image. The following code snippet/page shows how to create an image thumbnail using Bitmap.GetThumbnailImage method.


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.IO;
using System.Text;
using System.Net.Mail;
using System.Text.RegularExpressions;
using System.Threading;

public partial class _Default : System.Web.UI.Page
{   
    private string Finalimagename = "";   
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnUpload1_Click(object sender, EventArgs e)
    {
        ImageUpload();
    }

     private void ImageUpload()
   {      
        /* this code used to make directory name RealImage */       
        Directory.CreateDirectory(Server.MapPath("RealImage\\"));      
        HtmlInputFile htmlFile = (HtmlInputFile)BrowseImage0;
        if (htmlFile.PostedFile.ContentLength > 0)
        {
            string sFormat = String.Format("{0:#.##}", (float)htmlFile.PostedFile.ContentLength / 2048);
            if (float.Parse(sFormat) < float.Parse("2048"))
            {
                if (htmlFile.PostedFile != null)
                {
                    ViewState["ImageName"] = htmlFile.PostedFile.FileName.Substring(htmlFile.PostedFile.FileName.LastIndexOf("\\") + 1);//browseImagePath[0];                   
                }
                else
                {
                    ViewState["ImageName"] = "";
                }
            }
            else
            {
                lblError1.Visible = true;
                lblError1.Text = "Image Size is Large, please resize it !!";               
            }
        }
        else
        {
            ViewState["ImageName"] = "";
            if (ViewState["ImageName"].ToString() == "")
            {
                lblError1.Visible = true;
                lblError1.Text = "Attach an image to upload";
            }
            return;
        }

        //This function is used to make image thumbnail
        MakeThumbnail();
    }

    //Return thumbnail callback
    public bool ThumbnailCallback()
    {
        return true;
    }
    //For image thumbnial
    private void MakeThumbnail()
    {
        System.Drawing.Image myThumbnail150;
        object obj = new object();
        obj = BrowseImage0;
        System.Drawing.Image.GetThumbnailImageAbort myCallback = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
        HtmlInputFile hFile = (HtmlInputFile)obj;
        if (hFile.PostedFile != null && hFile.PostedFile.ContentLength > 0)
        {
            //this code used to remove some symbols between image name and replace with space
            string imgname1 = hFile.PostedFile.FileName.Replace('%', ' ').Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);
            string imgname2 = imgname1.Replace('#', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            string imgname3 = imgname2.Replace('@', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            string imgname4 = imgname3.Replace(',', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
            string imgname5 = imgname4.Replace('&', ' ').Substring(imgname1.LastIndexOf("\\") + 1);
           
            Finalimagename = imgname5.ToString();
 
            string imgname = hFile.PostedFile.FileName.Substring(hFile.PostedFile.FileName.LastIndexOf("\\") + 1);
            string sExtension = imgname.Substring(imgname.LastIndexOf(".") + 1);
 
            //this code is used to check image extension
            if (sExtension.ToLower() == "jpg" || sExtension.ToLower() == "gif" || sExtension.ToLower() == "bmp" || sExtension.ToLower() == "jpeg")
            {
                if (!File.Exists(MapPath("RealImage\\" + Finalimagename)))
                {
                    hFile.PostedFile.SaveAs(ResolveUrl(Server.MapPath("RealImage\\" + Finalimagename)));
 
                    System.Drawing.Image imagesize = System.Drawing.Image.FromFile(ResolveUrl(Server.MapPath("RealImage\\" + Finalimagename)));
                    Bitmap bitmapNew = new Bitmap(imagesize);
                    if (imagesize.Width < imagesize.Height)
                    {
                         myThumbnail150 = bitmapNew.GetThumbnailImage(150 * imagesize.Width / imagesize.Height, 150, myCallback, IntPtr.Zero);
                    }
                    else
                    {
                        myThumbnail150 = bitmapNew.GetThumbnailImage(150, imagesize.Height * 150 / imagesize.Width, myCallback, IntPtr.Zero);
                    }
                   
                        //Create a new directory name ThumbnailImage
                        Directory.CreateDirectory(Server.MapPath("ThumbnailImage"));
                        //Save image in TumbnailImage folder
myThumbnail150.Save(ResolveUrl(Server.MapPath("ThumbnailImage\\")) + Finalimagename,
System.Drawing.Imaging.ImageFormat.Jpeg);
                        MessageLabel.Text = "Successfully uploaded"
                }
            }
            else
            {
                lblError1.Visible = true;
                lblError1.Text = "Check image extension";
            }
        }
    }
}

Output :

First of all upload image.



Figure1.

This is real image.



Figure2.

This is thumbnail image.



Figure3.

For more information download attached file.


Login to add your contents and source code to this article
 [Top] Rate this article
 About the author
 
Raj Kumar
Rajkumar is working as a senior software engineer has over 5 years experience working on asp.net, vb.net,c#, ajax and other latest technologies. He holds Master's degree in Computer Science. currently enjoying working on wpf, wcf, silverlight, mvc.
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Go.NET
Build custom interactive diagrams, network, workflow editors, flowcharts, or software design tools. Includes many predefined kinds of nodes, links, and basic shapes. Supports layers, scrolling, zooming, selection, drag-and-drop, clipboard, in-place editing, tooltips, grids, printing, overview window, palette. 100% implemented in C# as a managed .NET Control. Document/View/Tool architecture with many properties&events. Optional automatic layout.
Dundas Software
Dundas Chart for .NET is the most advanced .NET charting package available today.  With an extremely complete feature set, elegant architecture and easy implementation, Dundas Chart can quickly add advanced Charting functionality to enhance and transform ASP.NET and Windows Forms applications.  Whether you are implementing charting into internal projects, or building applications for clients, Dundas Chart offers advanced technology and advanced results to get the most out of data.
Clickatell's SMS Gateway
Clickatell's Developer Solutions allow you to SMS enable any website or application via a range of API's. Learn More about our API connections.
Free access to .NET Memory Management video
Everything you need to know about Garbage Collection, Temporary Objects, Fragmentation, Finalization and common causes of memory leaks in .NET. Watch the video here.
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010 offers more to developers than any other Visual Studio release. Work more productively and collaboratively-with greater control over your work at every step. The Beta 2 can give you a head start on achieving efficiency.
 
   Print Read/Post comments Post a comment  Rate  
   Email to a friend  Bookmark  Similar Articles  Author's other articles  
Download Files:
ImageThumbnail.zip
 
 Post a Feedback, Comment, or Question about this article
Subject:  
Comment:  
Become a Sponsor
 Comments
Rating by Abhishek On December 18, 2008
Hi Raj, Very Nice Program.. Can it be possible to rate that uploaded picture. And after rating it will be shown on mouse over????
Reply | Email | Delete | Modify | 
You probably do not want to use this! by Kelly On January 16, 2009

I have seen this example before and highly recommend against using it. Let's look at the remarks section from the Image.GetThumbnailImage method...

"If the Image contains an embedded thumbnail image, this method retrieves the embedded thumbnail and scales it to the requested size. If the Image does not contain an embedded thumbnail image, this method creates a thumbnail image by scaling the main image.

"The GetThumbnailImage method works well when the requested thumbnail image has a size of about 120 x 120 pixels. If you request a large thumbnail image (for example, 300 x 300) from an Image that has an embedded thumbnail, there could be a noticeable loss of quality in the thumbnail image. It might be better to scale the main image (instead of scaling the embedded thumbnail) by calling the DrawImage method."

In other words .... if you upload an image that has a 25x25 preview and scale it to 100x100 you will have a noticable loss in quality, even if the original image was 1,000x1,000. There are alternate ways of scaling an existing image that will give better, more consistant results.

Reply | Email | Delete | Modify | 
Re: You probably do not want to use this! by Raj On April 1, 2009
hey kelly thanks for your comment, do you have any example like this can you send me that will be very helpful to me.

Thanks in advance
Reply | Email | Delete | Modify | 
not recommended by harun On January 18, 2009
I agree with Kelly. You should not use GetThumbnailImagemethod if you want high quality thumbnails. Also, you can use System.IO.File.Extension property instead of using PostedFile.FileName.LastIndexOf stuff.
Reply | Email | Delete | Modify | 
Definitely not recommended by bug On January 19, 2009

1) No error handling. If something goes wrong, that 2.5MB bitmap will be stuck in memory. It's important to use using{}!

2) Terrible thumbnail quality... Use DrawImage, and set compositing and resampling quality to high.

3) Huge resulting image size (Set ImageCodecParamaters, please!)

4) Inflexible - All files are in one directory, and only one size of each is supported.

Every few weeks somebody writes a new image resizing tutorial with new, unique problems. Every time, every example, either security, performance, or flexibility is compromised. If you want image resizing that just works, I'd recommend this well-tested, open-source image module.

http://nathanaeljones.com/products/asp-net-image-resizer/

The $70 'download fee' is well worth the stable and refined code. Building an image resizer looks deceptively easy at first glance, but preventing it from being a denial-of-service vector, making it fast enough for enormous product catalogs, and making it flexible enough to handle e multiple versions of any image is quite time-consuming.

Reply | Email | Delete | Modify | 
woo! by chen On March 24, 2009
This is what I want! thanks!
Reply | Email | Delete | Modify | 
You can use this! by George On April 9, 2009
@Kelly: 
The article is ok. It is not complete, but is ok. 
This can be used safely ONLY if we add two more lines of code:

i.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);
i.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);

By fliping the image twice we get a new image identical with the original one but without the embedded thumbnail. Now the thumbnail is in a very good quality. 


This is the only solution I know (or variations of it). Do you know a better one?
Reply | Email | Delete | Modify | 
Please Help by Jason On April 21, 2009
Hello Raj; This is a very nice article. I'm very new to c# programming and web design. I'm trying to design a website where the user can upload their photos for displaying. I was wondering with the sample coding that you've provided:- 1. How can i rename the image? 2. How can i link the image to the user? 3. How to control the image upload to four pictures only (Per User)? 4. How to store the image path to the database (SQL 2008 Express) base on user? Hope that you can guide me on this asap. Thank you very much.
Reply | Email | Delete | Modify | 

 Hosted by MaximumASP  |  Found a broken link?  |  Contact Us  |  Terms & conditions  |  Privacy Policy  |  Site Map  |  Suggest an Idea  |  Media Kit
Current Version: 5.2009.6.2
 © 1999 - 2009  Mindcracker LLC. All Rights Reserved