Dynamically resize uploaded images & save in PNG format

• Download source files - 1.72 Kb

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.