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

Dynamically resize uploaded images & save in PNG format

, 7 May 2003 CPOL
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. You can find some of his unusual code samples & snippets at his Code Gallery. He loves building mash-ups using public Web APIs.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalAbhishek Pant16-Jun-14 0:44 
GeneralMy vote of 1 Pinmemberrhandler27-Dec-10 11:02 
GeneralMy vote of 1 Pinmemberamit.comp121-Dec-10 0:50 
General1 problem Pinmemberbarbod_blue22-Feb-08 19:06 
AnswerRe: 1 problem - solution Pinmemberjohannesnestler12-Nov-08 0:33 
GeneralRe: 1 problem Pinmember<span style="forecolor:red">apr ~ asp</sp23-Mar-09 6:21 
Questionwonderful script Pinmemberdanielix7-Dec-07 5:42 
QuestionPNG 8Bit C# Pinmembervitor.duarte18-Dec-06 1:55 
QuestionVisual Basic Code PinmemberKMOwen28-Oct-06 20:58 
QuestionPNG Uploader - Overwrite Pinmemberdwhite0225-Oct-06 21:34 
GeneralThe process cannot access the file "D:\test\pics\top.jpg" because it is being used by another process. Pinmembershyrik15-Sep-06 14:35 
GeneralRe: The process cannot access the file "D:\test\pics\top.jpg" because it is being used by another process. PinmemberChris Cameron29-Nov-06 13:34 
GeneralRe: The process cannot access the file "D:\test\pics\top.jpg" because it is being used by another process. PinmemberGerryHeidenreich27-Sep-07 6:06 
GeneralPoor quality after resize Pinmemberedika200026-Feb-06 8:53 
GeneralWhy the Dummy CallBack Pinmemberemadadelme9-Feb-06 3:31 
GeneralUpload, Resize and Thumbnails Pinmemberzioturo2-Nov-05 1:31 
GeneralRe: Upload, Resize and Thumbnails Pinmembergauty12-Jan-06 0:04 
GeneralI have this problem Pinsusspmore27-Oct-05 1:44 
GeneralResize Images Problems Pinmembergmachado0821-May-05 4:18 
Generalmore universal resizing solution PinsussAnonymous3-Apr-05 11:50 
Generalgood article, but i have a better solution PinsussAnoynomus19-Oct-04 17:41 
GeneralRe: good article, but i have a better solution PinsussAnoynomus22-Oct-04 4:14 
GeneralRe: good article, but i have a better solution PinsussAnonymous20-Feb-05 14:44 
GeneralRe: good article, but i have a better solution PinmemberJeffrey Scott Flesher26-Jul-05 18:38 
GeneralRe: good article, but i have a better solution Pinmemberbharathreddyd11-Jul-06 7:33 
GeneralRe: Problem saving to a database Pinmemberwallapa23-Oct-07 20:45 
AnswerRe: good article, but i have a better solution Pinmemberuswebpro23-Sep-07 8:55 
GeneralRe: good article, but i have a better solution PinmemberMember 24735689-Aug-08 10:08 
Generalcode to display files and download PinsussAnonymous22-Sep-04 0:21 
GeneralI need some help Pinmemberlulu505016-Sep-04 5:57 
GeneralImage Resample PinmemberTroy Wolf28-Sep-03 11:20 
GeneralRe: Image Resample PinmemberMergen AGAYEV21-Nov-06 13:57 
QuestionRe: Image Resample Pinmemberimwavygravy28-Jun-07 3:26 
GeneralPermissions PinmemberGuyHarwood7-Jul-03 23:49 
GeneralRe: Permissions PinsussAnonymous24-Jul-03 1:23 
GeneralScaling Images Pinmemberchlock18-Jun-03 21:04 
GeneralRe: Scaling Images PinmemberSpider-Man18-Aug-03 13:05 
GeneralImage size PinmemberGunmen9-May-03 1:53 
GeneralRe: Image size Pinmembertalking10-Jun-03 20: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.141220.1 | Last Updated 8 May 2003
Article Copyright 2003 by 'Anil' Radhakrishna
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid