Resizing ASP.NET Images Using GDI+ Dynamically

In ASP.NET, you may easily resize images without using a third-party control. Whether reducing or enlarging, or creating a thumbnail image, ASP.NET is your oyster.

I'd like to review a solution by Alex Hildyard and demonstrate his custom ImageResize class in action. I'll provide a zip file for you to download with both my UI layer and Alex's ImageResize class project.

Go Picture Crazy: Resize Images Using GDI+ (C#) provides a tutorial and zip file and shows how to avoid using the GetThumbnailImage method to manipulate the size of an image and instead use the ImageResize class created by author, Alex Hildyard, who explains:

"The problem is, certain kinds of image formats (for example, JPEG) may already include embedded thumbnails, and under these circumstances GetThumbnailImage() just extracts the image's existing thumbnail and scales it to the proportions you specify, rather than generating a new bitmap by resampling the original image. In fact, many digital cameras will generate and embed a thumbnail automatically whenever you take a picture, so that you can quickly browse through any pictures you've taken on the camera itself."

In my example of using his class (VB.NET), we are going to create a proportionate resized image by pixels and save it to a file, and also create a proportionate resized image by percent and save it to an output stream to be used in the "src" tag of an image. Below is an example of our resuts:

To use the zip, within your original web project, simply go to File / Add Existing Project, and select the ImageResize.csproj. Using Alex's original zip, I right-clicked the project, selected Properties, and from the Application tab, changed the Target Framework to 3.5. Then in your web project, be sure to add this project to your references.

In my web form aspx page within my web application, I added this to the code-in-front:

In the code-behind, I added this:

Imports ImageHelper
Imports System.Drawing.Imaging
Imports System.Drawing

If Not Page.IsPostBack Then
LoadImage()
End If

End Sub

Dim o As New ImageResize()
o.File = filepathFrom
o.Height = 50
o.UsePercentages = False
o.GetThumbnail().Save(filepathTo, ImageFormat.Jpeg)
Image2.ImageUrl = "~/images/test1.jpg"
Label1.Text = GetImageValues(filepathFrom)
Label2.Text = GetImageValues(filepathTo)
Image3.ImageUrl = "ImageResizer.aspx?filepath=" & filepathFrom & "&height=10&usepercent=true"
Label3.Text = "Width: 283 Height: 212"

End Sub

Protected Function GetImageValues(ByVal fileName As String) As String

End Class

In the LoadImages method, put your path to the existing file and path to the new file. If you set UsePercentages to True, 50 will equal 50% of the image height, and if False, 50 will be 50 pixels high.

Notice Image2 is loaded on the page within the codebehind. If you want to embed the resizer within your src url, as done with Image3, simply create another web form, in my example I named it "ImageResizer." Add nothing to the code-in-front, and in the code behind, add this:

Imports ImageHelper
Imports System.Drawing.Imaging

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
LoadImage()
End Sub

If usePercent = String.Empty Then
usePercent = "false"
End If

If filepath <> String.Empty Then

Dim o As New ImageResize()
o.File = filepath
o.Height = CInt(height)
o.UsePercentages = CBool(usePercent)
o.GetThumbnail().Save(Response.OutputStream, ImageFormat.Jpeg)

Notice how the dynamic values are added to the query string in the original Image3.ImageURL and retreived in the ImageResizer LoadImage() method:

Image3.ImageUrl = "ImageResizer.aspx?filepath=" & filepathFrom & "&height=10&usepercent=true"

You may download the complete zip file: ImageEdit.zip

The ImageEdit.zip file also contains the source code for Image Text using GDI+: Creating an Image from Text or Adding Text to an Existing Image.

May your dreams be in ASP.NET and your images resized for the web!

Nannette Thacker