Click here to Skip to main content
11,629,393 members (61,805 online)
Click here to Skip to main content

Dynamically resize uploaded images & save in PNG format

, 7 May 2003 CPOL 342.6K 7.6K 161
Rate this:
Please Sign up or sign in to vote.
Overcome the problem of image quality deterioration on resizing by converting to PNG format.

Sample Image - PNGUploader.jpg

Introduction

Uploading images & storing them dynamically after resizing is a painless affair now using .NET, unlike what it used to be in Classic ASP. There are several good articles on uploading & resizing images on CodeProject (.NET Image Uploading [^], File Upload with ASP.NET [^], Thumbnail Image Creation and Image format Conversion Utility [^]) & elsewhere on the net (True Image Resizing [^]). One issue with resizing images is that the quality of the image deteriorates. This article is written in praise of the PNG image format & shows how the original quality of the uploaded image of any regular format can be maintained & even be improved.

PNG - What's it?

Check out this excellent article on the PNG image format - FAQ: Converting GIF or JPG to PNG [^]. To paraphrase the article -

  • PNG stands for Portable Network Graphics and pronounced "ping".
  • PNG is supported by the major browsers (Microsoft IE and Netscape 4.x and higher)
  • The images are a lot clearer, no more grainy GIF images or pixelated JPGs!

Source code

This application allows the user to set the dimensions for the image to be resized & uploaded. The resized image is converted into the W3C Portable Network Graphics (PNG) image format by using the PNG property of the ImageFormat class.

<%@ Page Language="C#" %>
<%@ import Namespace="System.Drawing.Imaging" %>
<script runat="server">
//Pics folder has to be created under the current folder
void UploadBtn_Click(Object sender, EventArgs e)
{      
    String UploadedFile = MyFile.PostedFile.FileName;
    int ExtractPos = UploadedFile.LastIndexOf("\\") + 1;
  
    //to retrieve only Filename from the complete path
    String UploadedFileName = UploadedFile.Substring(ExtractPos,UploadedFile.Length - ExtractPos);
       
    // Display information about posted file. Div is invisible by default   
    FileName.InnerHtml = UploadedFileName;
    
    MyContentType.InnerHtml = MyFile.PostedFile.ContentType;
    
    ContentLength.InnerHtml = MyFile.PostedFile.ContentLength.ToString();
    
    FileDetails.Visible = true; //div is made visible
 
    // Save uploaded file to server at the in the Pics folder
    MyFile.PostedFile.SaveAs(Request.PhysicalApplicationPath 
                            + "pics\\" + UploadedFileName );

   //thumbnail creation starts
   try
   {
      //Retrieve the image filename whose thumbnail has to be created
      String imageUrl =  UploadedFileName;
      //Read in the width and height
      int imageHeight =Convert.ToInt32(h.Text);
      int imageWidth  = Convert.ToInt32(w.Text); 
  
      //You may even specify a standard thumbnail size
      //int imageWidth  = 70; 
      //int imageHeight = 70;
  
      if (imageUrl.IndexOf("/") >= 0 || imageUrl.IndexOf("\\") >= 0 )
      {
         //We found a / or \
         Response.End();
      }
  
      //the uploaded image will be stored in the Pics folder.
      //to get resize the image, the original image has to be
      //accessed from the Pics folder
      imageUrl = "pics/" + imageUrl;
  
      System.Drawing.Image fullSizeImg 
              = System.Drawing.Image.FromFile(Server.MapPath(imageUrl));
      System.Drawing.Image.GetThumbnailImageAbort dummyCallBack 
              = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
      System.Drawing.Image thumbNailImg 
              = fullSizeImg.GetThumbnailImage(imageWidth, imageHeight, 
                                              dummyCallBack, IntPtr.Zero);
   
      //We need to create a unique filename for each generated image
      DateTime MyDate = DateTime.Now;
  
      String MyString  = MyDate.ToString("ddMMyyhhmmss") + ".png" ;
 
      //Save the thumbnail in PNG format. 
      //You may change it to a diff format with the ImageFormat property
      thumbNailImg.Save ( Request.PhysicalApplicationPath 
                          + "pics\\" +   MyString , ImageFormat.Png);
      thumbNailImg.Dispose();
   
      //Display the original & the newly generated thumbnail
   
      Image1.AlternateText = "Original image";  
      Image1.ImageUrl="pics\\" + UploadedFileName;
      Image2.AlternateText = "Thumbnail";
      Image2.ImageUrl="pics\\" + MyString;
   }
   catch(Exception ex)
   {
      Response.Write("An error occurred - " + ex.ToString());
   }
}
  
//this function is reqd for thumbnail creation
public bool ThumbnailCallback()
{
   return false;
}
</script>

How to run the app

Unzip & run the .aspx file using IIS. Make sure a folder named PICS is created before-hand in the current working directory.

Conclusion

This article demonstrates how the quality of dynamically created images can be maintained & even enhanced by saving them in PNG format.

License

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

Share

About the Author

'Anil' Radhakrishna
Web Developer
India India
'Anil' Radhakrishna is a seasoned developer who enjoys working with Microsoft tools & technologies. He blogs quite regularly about his little discoveries and technical experiments on his blog called Tech Tips, Tricks & Trivia. He loves building mash-ups using public Web APIs.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Abhishek Pant15-Jun-14 23:44
professionalAbhishek Pant15-Jun-14 23:44 
GeneralMy vote of 1 Pin
rhandler27-Dec-10 10:02
memberrhandler27-Dec-10 10:02 
GeneralMy vote of 1 Pin
amit.comp120-Dec-10 23:50
memberamit.comp120-Dec-10 23:50 
General1 problem Pin
barbod_blue22-Feb-08 18:06
memberbarbod_blue22-Feb-08 18:06 
AnswerRe: 1 problem - solution Pin
johannesnestler11-Nov-08 23:33
memberjohannesnestler11-Nov-08 23:33 
GeneralRe: 1 problem Pin
<span style="forecolor:red">apr ~ asp</sp23-Mar-09 5:21
member<span style="forecolor:red">apr ~ asp</sp23-Mar-09 5:21 
Questionwonderful script Pin
danielix7-Dec-07 4:42
memberdanielix7-Dec-07 4:42 
QuestionPNG 8Bit C# Pin
vitor.duarte18-Dec-06 0:55
membervitor.duarte18-Dec-06 0:55 
QuestionVisual Basic Code Pin
KMOwen28-Oct-06 19:58
memberKMOwen28-Oct-06 19:58 
QuestionPNG Uploader - Overwrite Pin
dwhite0225-Oct-06 20:34
memberdwhite0225-Oct-06 20:34 
GeneralThe process cannot access the file "D:\test\pics\top.jpg" because it is being used by another process. Pin
shyrik15-Sep-06 13:35
membershyrik15-Sep-06 13:35 
GeneralRe: The process cannot access the file "D:\test\pics\top.jpg" because it is being used by another process. Pin
Chris Cameron29-Nov-06 12:34
memberChris Cameron29-Nov-06 12:34 
GeneralRe: The process cannot access the file "D:\test\pics\top.jpg" because it is being used by another process. Pin
GerryHeidenreich27-Sep-07 5:06
memberGerryHeidenreich27-Sep-07 5:06 
GeneralPoor quality after resize Pin
edika200026-Feb-06 7:53
memberedika200026-Feb-06 7:53 
GeneralWhy the Dummy CallBack Pin
emadadelme9-Feb-06 2:31
memberemadadelme9-Feb-06 2:31 
GeneralUpload, Resize and Thumbnails Pin
zioturo2-Nov-05 0:31
memberzioturo2-Nov-05 0:31 
GeneralRe: Upload, Resize and Thumbnails Pin
gauty11-Jan-06 23:04
membergauty11-Jan-06 23:04 
GeneralI have this problem Pin
pmore27-Oct-05 0:44
susspmore27-Oct-05 0:44 
GeneralResize Images Problems Pin
gmachado0821-May-05 3:18
membergmachado0821-May-05 3:18 
Generalmore universal resizing solution Pin
Anonymous3-Apr-05 10:50
sussAnonymous3-Apr-05 10:50 
Generalgood article, but i have a better solution Pin
Anoynomus19-Oct-04 16:41
sussAnoynomus19-Oct-04 16:41 
GeneralRe: good article, but i have a better solution Pin
Anoynomus22-Oct-04 3:14
sussAnoynomus22-Oct-04 3:14 
GeneralRe: good article, but i have a better solution Pin
Anonymous20-Feb-05 13:44
sussAnonymous20-Feb-05 13:44 
GeneralRe: good article, but i have a better solution Pin
Jeffrey Scott Flesher26-Jul-05 17:38
memberJeffrey Scott Flesher26-Jul-05 17:38 
GeneralRe: good article, but i have a better solution Pin
bharathreddyd11-Jul-06 6:33
memberbharathreddyd11-Jul-06 6:33 
GeneralRe: Problem saving to a database Pin
wallapa23-Oct-07 19:45
memberwallapa23-Oct-07 19:45 
AnswerRe: good article, but i have a better solution Pin
uswebpro23-Sep-07 7:55
memberuswebpro23-Sep-07 7:55 
GeneralRe: good article, but i have a better solution Pin
Member 24735689-Aug-08 9:08
memberMember 24735689-Aug-08 9:08 
Generalcode to display files and download Pin
Anonymous21-Sep-04 23:21
sussAnonymous21-Sep-04 23:21 
GeneralI need some help Pin
lulu505016-Sep-04 4:57
memberlulu505016-Sep-04 4:57 
GeneralImage Resample Pin
Troy Wolf28-Sep-03 10:20
memberTroy Wolf28-Sep-03 10:20 
GeneralRe: Image Resample Pin
Mergen AGAYEV21-Nov-06 12:57
memberMergen AGAYEV21-Nov-06 12:57 
QuestionRe: Image Resample Pin
imwavygravy28-Jun-07 2:26
memberimwavygravy28-Jun-07 2:26 
GeneralPermissions Pin
GuyHarwood7-Jul-03 22:49
memberGuyHarwood7-Jul-03 22:49 
GeneralRe: Permissions Pin
Anonymous24-Jul-03 0:23
sussAnonymous24-Jul-03 0:23 
GeneralScaling Images Pin
chlock18-Jun-03 20:04
memberchlock18-Jun-03 20:04 
GeneralRe: Scaling Images Pin
Spider-Man18-Aug-03 12:05
memberSpider-Man18-Aug-03 12:05 
GeneralImage size Pin
Gunmen9-May-03 0:53
memberGunmen9-May-03 0:53 
GeneralRe: Image size Pin
talking10-Jun-03 19:08
membertalking10-Jun-03 19:08 

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.150723.1 | Last Updated 8 May 2003
Article Copyright 2003 by 'Anil' Radhakrishna
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid