Blue Theme Orange Theme Green Theme Red Theme
 
Team Foundation Server Hosting
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
Nevron Chart
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 :
Page Views : 42939
Downloads : 1492
Rating :
 Rate it
Level : Beginner
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
ImageThumbnail.zip
 
 
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
 Tag Cloud
 Latest Jobs
More ... 
 Latest Interview Questions
More ... 


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.

Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post Here.
Login to add your contents and source code to this article
 [Top] Rate this article
 
 About the author
 
Raj Kumar

Raj Kumar is a Microsoft MVP and Senior Software Engineer with lots of hands on experience using ASP.NET 2.0/3.5, AJAX, MVC, C#, Visual Basic .NET, SQL Server 2005/2008, Oracle, WPF, WCF, XAML and Silverlight. He has over 6 years of IT experience working most on Microsoft technologies. He holds Master's degree in Computer Science. When he is not writing code, he likes to write articles and play cricket.

Reach him at raj2511984@gmail.com 

 

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.
Discover the Top 5 .NET Memory Management Fundamentals
To write the best .NET code, you need to know exactly how the .NET framework really manages memory. Ricky Leeks presents the Top 5 fundamental facts of .NET memory management. Learn more.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
 
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
Team Foundation Server Hosting
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 | 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 | 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 | 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 | Modify 
Definitely not recommended by Michael 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 | Modify 
woo! by chen On March 24, 2009
This is what I want! thanks!
Reply | Email | 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 | 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 | Modify 
Good Article by drug On May 20, 2010
Hi Raj this is good article.

 If any one not that much into coding. i found a free thumbnail creator "DLL". at http://aspspider.net/deeven/  
Reply | Email | Modify 
HELP !!!!!!!!!!!!!! by mohdfaizan On September 29, 2010
i really thanksfull to u
ths code is helping me so much but
i want how to store in a data base
and hoe to retriew the image from the database
Reply | Email | Modify 
HI ABHISHEK by mohdfaizan On September 29, 2010
actually i want, how to store number of image in a database and how to retriew it byusing thumnails
if u help me in this topic i really thanksfull to u.
if u send me a demo project in my mail thats is better for me
my mail id is : faizan.iwt@gmail.com
Reply | Email | Modify 
good article by ghouse On July 7, 2011
Nice article Thanks you very much
Reply | Email | Modify 
Nevron Chart
 © 2012  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.