Dynamic Image Resizing Using HTTP Modules

• Download source - 59.8 KB

Introduction

Resizing images for your website doesn't have to be difficult. Through the magic of HTTP modules, we can intercept every request of a certain type that comes through your site (such as image requests), and perform any necessary processing before sending the result down to the browser.

This is very handy when you need to resize images throughout your website. The code below will allow you to:

• Resize images by adding the width and height after the image.
• Define image "keys" with a certain width and height, so you can change the width and height of the key in a configuration file, and every image throughout the site that has that key will be automatically resized.
• Make these changes with nothing more than adding a few lines to the web.config file, and adding an XML configuration file if you want to use image keys.
• The configuration settings and list of resized images are cached to make this solution as scalable as possible.
• The resized image is saved to disk and then used for all future requests, again for scalability purposes.

See a working example of how easy image resizing can be. View the source to see that the same image name is being used in all examples, and only the width and height are changing.

Background

A knowledge of HTTP modules and how they work will come in handy to understanding what's going on here. You can get a brief overview of the subject with this article at 15 seconds.

Using the code

To add this code to an existing site, add the following three lines to the httpHandlers section of your web.config file. This tells .NET that anything it finds with an extension of .jpg, .gif, or .png, followed by .ashx, should be handled by the ResizeImages class.

<add verb="*" path="*.jpg.ashx" type="ImageHandlers.ResizeImages"/>
<add verb="*" path="*.gif.ashx" type="ImageHandlers.ResizeImages"/>
<add verb="*" path="*.png.ashx" type="ImageHandlers.ResizeImages"/>

Next, in your appSettings section, define where you want the resized images to be saved, and the location of the XML file you'll use for your image keys (the second setting is optional if you don't plan on using image keys).

<add key="ResizedImagesDirectory" value="~/images/resized"/>
<add key="ResizedImageKeys" value="~/images/resized.xml"/>

Drop the ResizeImages.vb class in your App_Code folder, and add your image links to a test page.

Your links can be displayed in several different formats:

<img src="images/turtle.jpg.ashx?k=normal" />     <!--With an image key-->
<img src="images/turtle.jpg.ashx?h=100" />    <!--Height only (width is scaled)-->
<img src="images/turtle.jpg.ashx?w=100" />    <!--Width only (height is scaled)-->
<img src="images/turtle.jpg.ashx?h=100&w=100" />  <!--Height and width set-->

If you want to define the height and width of your image keys, that information goes in the resized.xml file (or whatever you choose to name your file). The format looks like this:

<ResizedImages>
  <image name="thumbnail" width="100" height="100" />
  <image name="normal" width="200" />  
  <image name="large" height="300" />  
</ResizedImages>

So, in this example, an image that has an image key of "normal" would have its width set to 200. If you change the width of the image key, every image on your site that is using the "normal" key will be automatically resized.

Code

The ResizeImages.vb class handles all the image resizing. If you're interested in how this works, I have commented the code below and you can investigate it in more detail. If you just want to start using everything, download the project and enjoy!

Note: This currently only works with .NET 3.5, since I'm using LINQ to parse through the XML for the image keys. If you want to run this in .NET 2.0, you can replace the LINQ code in the GetImageDimensions function and use XPath queries instead.

Imports System
Imports System.Text
Imports System.Web
Imports System.Drawing
Imports System.Web.SessionState
Imports System.IO
Imports System.Xml
Imports System.Collections.Generic
Imports System.Linq
Imports System.Xml.Linq

Namespace ImageHandlers
    Public Class ResizeImages
        Implements IHttpHandler

        Enum ImageType As Integer
            JPG
            PNG
            GIF
        End Enum

        Public ReadOnly Property IsReusable() As Boolean _
               Implements System.Web.IHttpHandler.IsReusable
            Get
                Return True
            End Get
        End Property

        Dim ResizedImagesDirectory As String = _
          ConfigurationManager.AppSettings("ResizedImagesDirectory")

        Public Sub ProcessRequest(ByVal Ctx As System.Web.HttpContext) _
               Implements System.Web.IHttpHandler.ProcessRequest

            'Get the current request
            Dim Req As HttpRequest = Ctx.Request


            'Set the width and height for the resized image
            Dim Width As Integer = 0
            Dim Height As Integer = 0
            Dim Key As String = ""
            If Not IsNothing(Req.QueryString("w")) And _
                   IsNumeric(Req.QueryString("w")) Then
                Width = Req.QueryString("w")
            End If
            If Not IsNothing(Req.QueryString("h")) And _
                   IsNumeric(Req.QueryString("h")) Then
                Height = Req.QueryString("h")
            End If
            If Not IsNothing(Req.QueryString("k")) Then
                Key = Req.QueryString("k")
            End If

            'If we have a key stored in an xml file, use it to determine 
            'the width and height of the image instead
            If Key.Length > 0 Then
                Dim KeyImage As New ResizedImage
                KeyImage = GetImageDimensions(Ctx, Key)
                Height = KeyImage.Height
                Width = KeyImage.Width
            End If

            Dim DisplayResizedImage As Boolean = True
            If Width = 0 And Height = 0 Then
                'They didn't set a height or width, 
                'so don't create or display a resized image
                'Use the original image instead
                DisplayResizedImage = False
            End If

            'Get the path of the file, without the .ashx extension
            Dim PhysicalPath As String = Regex.Replace(Req.PhysicalPath, _
                                           "\.ashx.*", "")

            'Determine the content type, and save 
            'what image type we have for later use
            Dim ImgType As ImageType
            If PhysicalPath.EndsWith(".jpg") Or _
                   PhysicalPath.EndsWith(".jpeg") Then
                Ctx.Response.ContentType = "image/jpeg"
                ImgType = ImageType.JPG
            ElseIf PhysicalPath.EndsWith(".gif") Then
                Ctx.Response.ContentType = "image/gif"
                ImgType = ImageType.GIF
            ElseIf PhysicalPath.EndsWith(".png") Then
                Ctx.Response.ContentType = "image/png"
                ImgType = ImageType.PNG
            End If


            'Name the images based on their width, height, 
            'and path to ensure they're unique.
            'The image name starts out looking like 
            '/HttpModule/images/turtle.jpg (the virtual path), and gets
            'converted to 400_200_images_turtle.jpg.
            'The 400 is the width, and the 200 is the height.
            'If a width or height is not specified,
            'it will look like 0_200_images_turtle.jpg (an example
            'where the width is not specified).
            Dim VirtualPath As String = Regex.Replace(Req.Path, "\.ashx.*", "")
            Dim ResizedImageName As String = Regex.Replace(VirtualPath, "/", "_")
            ResizedImageName = Regex.Replace(ResizedImageName, "_.*?_", "")
            ResizedImageName = Width & "_" & Height & _
                               "_" & ResizedImageName

            'Get the resized image
            Dim ri As New ResizedImage
            ri = GetResizedImage(Ctx, ResizedImageName, Height, Width, ImgType)

            Try
                If DisplayResizedImage Then 'display resized image
                    Ctx.Response.WriteFile(Path.Combine(ri.ImagePath, ri.ImageName))
                Else
                    'display original image
                    Ctx.Response.WriteFile(PhysicalPath)
                End If

            Catch ex As Exception
                'You can add logging here if you want,
                'but most like the image path can't be found,
                'so don't do anything
            End Try

        End Sub

        Private Function GetResizedImage(ByVal Ctx As System.Web.HttpContext, _
                ByVal ImageName As String, ByVal Height As Integer, _
                ByVal Width As Integer, ByVal ImgType As ImageType) As ResizedImage

            'Look in the cache first for a list of images that have been resized
            Dim ResizedImageList As New List(Of ResizedImage)
            ResizedImageList = Ctx.Cache.Get("ResizedImageList")

            Dim ResizedImage As New ResizedImage
            Dim ImageFound As Boolean = False

            If IsNothing(ResizedImageList) Then
                'Nothing in the cache, start a new image list
                ResizedImageList = New List(Of ResizedImage)
            Else
                'Let's see if an image with this name and size is already created
                For Each ri As ResizedImage In ResizedImageList
                    If ri.ImageName = ImageName And ri.Height = Height _
                        And ri.Width = Width Then
                        'The image already exists, no need to create it.
                        ResizedImage = ri
                        ImageFound = True
                        Exit For
                    End If
                Next
            End If

            'Create the folder where we want to save 
            'the resized images if it's not already there
            Dim ResizedImagePath As String = _
                Ctx.Server.MapPath(ResizedImagesDirectory)
            If Not Directory.Exists(ResizedImagePath) Then
                Directory.CreateDirectory(ResizedImagePath)
            End If

            'Clear the cache anytime the resized image folder 
            'changes (in case items were removed from it)
            Dim cd As New CacheDependency(ResizedImagePath)

            If Not ImageFound Then
                'We didn't find the image in the list of resized 
                'images...look in the resized folder
                'and see if it's there
                Dim ImageFullPath As String = _
                    Path.Combine(Ctx.Server.MapPath(ResizedImagesDirectory), ImageName)
                If File.Exists(ImageFullPath) Then
                    'The image has already been created, 
                    'set the properties for the image
                    'and add it to the cached image list
                    ResizedImage.ImageName = ImageName
                    ResizedImage.ImagePath = _
                           Ctx.Server.MapPath(ResizedImagesDirectory)
                    ResizedImage.Height = Height
                    ResizedImage.Width = Width
                    ResizedImageList.Add(ResizedImage)

                    'Keep the cache for a day, unless new 
                    'images get added to or deleted from
                    'the resized image folder
                    Dim ts As New TimeSpan(24, 0, 0)
                    Ctx.Cache.Add("ResizedImageList", ResizedImageList, cd, _
                                  Cache.NoAbsoluteExpiration, ts, _
                                  CacheItemPriority.Default, Nothing)
                End If
            End If

            Dim Req As HttpRequest = Ctx.Request
            Dim PhysicalPath As String = Regex.Replace(Req.PhysicalPath, _
                                         "\.ashx.*", "")
            If ResizedImage.ImageName = "" Then
                'The image isn't already created, 
                'we need to create it add it to the cache
                ResizeImage(PhysicalPath, ResizedImagePath, _
                            ImageName, Width, Height, ImgType)

                'Now update the cache since we've added a new resized image 
                ResizedImage.Width = Width
                ResizedImage.Height = Height
                ResizedImage.ImageName = ImageName
                ResizedImage.ImagePath = ResizedImagePath
                ResizedImageList.Add(ResizedImage)

                Dim ts As New TimeSpan(24, 0, 0)
                Ctx.Cache.Add("ResizedImageList", ResizedImageList, cd, _
                              Cache.NoAbsoluteExpiration, ts, _
                              CacheItemPriority.Default, Nothing)
            End If

            Return ResizedImage
        End Function

        Private Sub ResizeImage(ByVal ImagePath As String, _
                    ByVal ResizedSavePath As String, ByVal ResizedImageName As String, _
                    ByVal NewWidth As Integer, ByVal NewHeight As Integer, _
                    ByVal ImgType As ImageType)

            'Make sure the image exists before trying to resize it
            If File.Exists(ImagePath) And Not (NewHeight = 0 And NewWidth = 0) Then
                Using OriginalImage As New Bitmap(ImagePath)

                    If NewWidth > 0 And NewHeight = 0 Then
                        'The user only set the width, calculate the new height
                        NewHeight = Math.Floor(OriginalImage.Height / _
                                    (OriginalImage.Width / NewWidth))
                    End If

                    If NewHeight > 0 And NewWidth = 0 Then
                        'The user only set the height, calculate the width
                        NewWidth = Math.Floor(OriginalImage.Width / _
                                             (OriginalImage.Height / NewHeight))
                    End If

                    If NewHeight > OriginalImage.Height Or _
                                      NewWidth > OriginalImage.Width Then
                        'Keep the original height and width 
                        'to avoid losing image quality
                        NewHeight = OriginalImage.Height
                        NewWidth = OriginalImage.Width
                    End If


                    Using ResizedImage As New Bitmap(OriginalImage, NewWidth, NewHeight)
                        ResizedImage.SetResolution(72, 72)

                        Dim newGraphic As Graphics = Graphics.FromImage(ResizedImage)
                        newGraphic.Clear(Color.White)
                        newGraphic.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias
                        newGraphic.InterpolationMode = _
                           Drawing2D.InterpolationMode.HighQualityBicubic
                        newGraphic.DrawImage(OriginalImage, 0, 0, NewWidth, NewHeight)

                        'Save the image as the appropriate type
                        Select Case ImgType
                            Case ImageType.GIF
                                ResizedImage.Save(System.IO.Path.Combine(ResizedSavePath, _
                                                  ResizedImageName), Imaging.ImageFormat.Gif)
                            Case ImageType.JPG
                                ResizedImage.Save(System.IO.Path.Combine(ResizedSavePath, _
                                                  ResizedImageName), Imaging.ImageFormat.Jpeg)
                            Case ImageType.PNG
                                ResizedImage.Save(System.IO.Path.Combine(ResizedSavePath, _
                                                  ResizedImageName), Imaging.ImageFormat.Png)
                        End Select

                    End Using
                End Using
            End If
        End Sub

        Private Function GetImageDimensions(ByVal Ctx As HttpContext, _
                         ByVal Key As String) As ResizedImage


            Dim ri As New ResizedImage

            'If I enter the key "thumbnail", this function 
            'will go to the xml file to find out
            'what the width and height of a thumbnail should be.

            'The xml that we're reading from looks like this.
            'You can set the width, the height, or both
            '<ResizedImages>
            '  <image name="thumbnail" width="100" height="100" />
            '  <image name="normal" width="200" />  
            '  <image name="large" height="300" />  
            '</ResizedImages>
            
            'Load the xml file
            Dim XMLSource As XElement = GetResizedImageKeys(Ctx)

            'Get all nodes where the name equals the key
            'To make this code work in .Net 2.0, use an xpath query to get the height
            'and width values instead of a LINQ query
            Dim ResizedQuery = From r In XMLSource.Elements("image") _
                            Where r.Attribute("name") = Key _
                            Select r

            'Set the resized image we're returning with the width and height
            For Each r As XElement In ResizedQuery
                If Not IsNothing(r.Attribute("height")) Then
                    ri.Height = r.Attribute("height")
                End If
                If Not IsNothing(r.Attribute("width")) Then
                    ri.Width = r.Attribute("width")
                End If
            Next

            Return ri
        End Function

        Private Function GetResizedImageKeys(ByVal ctx As HttpContext) As XElement
            Dim xel As XElement = Nothing
            Dim ResizedImageKeys As String = _
                ctx.Server.MapPath(ConfigurationManager.AppSettings("ResizedImageKeys"))
            If Not IsNothing(ResizedImageKeys) Then
                'Try to get the xml from the cache first
                xel = ctx.Cache.Get("ResizedImageKeys")

                'If it's not there, load the xml document and then add it to the cache
                If IsNothing(xel) Then
                    xel = XElement.Load(ResizedImageKeys)
                    Dim cd As New CacheDependency(ResizedImageKeys)
                    Dim ts As New TimeSpan(24, 0, 0)
                    ctx.Cache.Add("ResizedImageKeys", xel, cd, _
                                  Cache.NoAbsoluteExpiration, ts, _
                                  CacheItemPriority.Default, Nothing)
                End If
            End If
            Return xel
        End Function

        'This class is used to keep track of which images are resized.
        'We save this in a cached list and look here first,
        'so we don't have to look through the folder on the file
        'system every time we want to see if the resized image
        'exists or not
        Private Class ResizedImage
            Private _ImageName As String
            Private _ImagePath As String
            Private _Width As Integer
            Private _Height As Integer
            Public Property ImageName() As String
                Get
                    Return _ImageName
                End Get
                Set(ByVal value As String)
                    _ImageName = value
                End Set
            End Property
            Public Property ImagePath() As String
                Get
                    Return _ImagePath
                End Get
                Set(ByVal value As String)
                    _ImagePath = value
                End Set
            End Property
            Public Property Width() As Integer
                Get
                    Return _Width
                End Get
                Set(ByVal value As Integer)
                    _Width = value
                End Set
            End Property
            Public Property Height() As Integer
                Get
                    Return _Height
                End Get
                Set(ByVal value As Integer)
                    _Height = value
                End Set
            End Property
            Public Sub New()
                Width = 0
                Height = 0
                ImagePath = ""
                ImageName = ""
            End Sub
        End Class
    End Class

End Namespace