When you think ASP, think...
Recent Articles xml
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips
spgif spgif

Book Reviews
Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
Web Hosts
Author an Article
spgif spgif

ASP ASP.NET ASP FAQs Feedback topnav-right
Print this Page!
Published: Wednesday, January 22, 2003

True Image Resizing, Part 2

By Scott Mitchell

  • Read Part 1

  • In Part 1 we examined how to create an ASP.NET Web page, ShowImage.aspx, that would display an image. This ASP.NET Web page could then be referenced via an HTML <img> tag. In this part we'll look at how to extend the ShowImage.aspx so that it can produce thumbnail images; then, we'll see how to tie this lesson together with the lessons learned from the article Displaying a List of Scaled Images.

    - continued -

    Altering ShowImage.aspx to Create a Thumbnail

    Earlier we saw that we could create an ASP.NET Web page called ShowImage.aspx that could be passed in an image file name and display the image. In addition to accepting the file name, let's augment this ASP.NET Web page so that we can pass in an optional height and width. When a height and width are passed in, the image displayed is first dynamically resized to the specified height and width. The following code implements the needed changes in ShowImage.aspx.

    <%@Import Namespace="System.Drawing.Imaging" %>
    <script language="VB" runat="server">
      Function ThumbnailCallback() as Boolean
        Return False
      End Function
      Sub Page_Load(sender as Object, e as EventArgs)
        'Read in the image filename to create a thumbnail of
        Dim imageUrl as String = Request.QueryString("img")
        'Read in the width and height
        Dim imageHeight as Integer = Request.QueryString("h")
        Dim imageWidth as Integer = Request.QueryString("w")
        'Make sure that the image URL doesn't contain any /'s or \'s
        If imageUrl.IndexOf("/") >= 0 Or imageUrl.IndexOf("\") >= 0 then
          'We found a / or \
        End If
        'Add on the appropriate directory
        imageUrl = "/images/" & imageUrl
        Dim fullSizeImg as System.Drawing.Image
        fullSizeImg = System.Drawing.Image.FromFile(Server.MapPath(imageUrl))
        'Do we need to create a thumbnail?
        Response.ContentType = "image/gif"
        If imageHeight > 0 and imageWidth > 0 then
          Dim dummyCallBack as System.Drawing.Image.GetThumbNailImageAbort
          dummyCallBack = New _
             System.Drawing.Image.GetThumbnailImageAbort(AddressOf ThumbnailCallback)
          Dim thumbNailImg as System.Drawing.Image
          thumbNailImg = fullSizeImg.GetThumbnailImage(imageWidth, imageHeight, _
                                                       dummyCallBack, IntPtr.Zero)
          thumbNailImg.Save(Response.OutputStream, ImageFormat.Gif)  
          'Clean up / Dispose...
          fullSizeImg.Save(Response.OutputStream, ImageFormat.Gif)  
        End If
        'Clean up / Dispose...
      End Sub
    [View a Live Demo!]

    Most of the code has remained the same. The important additions are two new variables, imageHeight and imageWidth, which are assigned the QueryString values h and w. An If statement is used to check if the height and width have been specified; if they have, then the image is resized using the GetThumbnailImage() method call. If the height and width have not been specified, then the image is outputted without any resizing.

    Resizing Images that Already Include Thumbnails
    Alert 4Guys readers Travis R. wrote in to say:
    Just wanted to comment on your article in which you use the GetThumbNailImage() method to resize an image. I used some of your code example and using images off of one of my digital cameras and it worked just fine. When I used images off of another digital camera, however, I found that the resized images (resized from 1600x1200 to 400x300) looked horrible. They appeared as though I used a very high compression or something when saving the image.

    Upon further looking at Microsoft's documentation I found the cause of the problem. The problem is that the GetThumbNailImage() method resizes an image from the original image if their is no thumbnail embedded in the image. The problem is, most digital cameras do embed a thumbnail image in the image. So, what's happening is that the tiny thumbnail image embedded in the picture is being sized from something like 32x12 to 400x300 which gives the horrible picture quality. Just an FYI.

    4Guys enthusiast Doug P. chimes in with a workaround:

    I've found that if you rotate the original image 360 degrees it solves this problem. I guess rotating the image causes it to lose the embedded thumbnail and the full size image is then resized when the GetThumbnailImage() method is called. Give it a try, just add in the following code right before you call the GetThumbnailImage() method:


    Putting It All Together: Using ShowImage.aspx to Display the Images in a Directory

    Now that we have examined how to dynamically resize an image using the GetThumbnailImage() method call, let's discuss how to integrate this with the ASP.NET Web page that listed the images in a directory. (If you have not read the article that this article is based on - Displaying a List of Scaled Images - you should do so now.)

    In Displaying a List of Scaled Images we saw an ASP.NET Web page that used the Image class to determine the height and width of each image in a directory. If the height or width were beyond certain bounds, the image's height and width attributes were scaled via the height and width attributes of the <img> tag. The code to do this was as follows:

    For Each s in Directory.GetFiles(Server.MapPath(IMAGE_DIRECTORY), "*.gif")    
      'Get information about the image
      Dim currentImage as System.Drawing.Image = System.Drawing.Image.FromFile(s)
      imgHeight = currentImage.Height
      imgWidth = currentImage.Width
      If imgWidth > maxWidth OR imgHeight > maxHeight then
        ... some calculations ...
      End If
      html = "<a href=""" & IMAGE_DIRECTORY & Path.GetFileName(s) & """>" & _
             "<img src=""" & IMAGE_DIRECTORY & Path.GetFileName(s) & """" & _
                  "height=""" & imgHeight & """ width=""" & imgWidth & """>" & _

    Simple enough. Now, to use the dynamic resizing, rather than having the <img> tag's src property refer to the actual image URL, we'll have it refer to ShowImage.aspx, passing in the image's URL, height, and width through the QueryString. This will change the code that sets the html variable to:

    For Each s in Directory.GetFiles(Server.MapPath(IMAGE_DIRECTORY), "*.gif")    
      If imgHeight <> currentImage.Height Or imgWidth <> currentImage.Width then
        html = "<a href=""" & IMAGE_DIRECTORY & Path.GetFileName(s) & """>" & _
           "<img src=""ShowImage.aspx?img=" & Path.GetFileName(s) & "&w=" & _
                imgWidth & "&h=" & imgHeight & """ " & _
                "height=""" & imgHeight & """ width=""" & imgWidth & """>" & _
        html = "<a href=""" & IMAGE_DIRECTORY & Path.GetFileName(s) & """>" & _
           "<img src=""ShowImage.aspx?img=" & Path.GetFileName(s) & """ " & _
                "height=""" & imgHeight & """ width=""" & imgWidth & """>" & _
      End If
    [View a Live Demo!]

    The reason there's an If statement is because we don't always need to resize the image. That is, if the image is within the size constraints, then the image doesn't need to be resized. In such a case, the QueryString for ShowImage.aspx does not include the w and h parameters.


    In this article we examined how to dynamically resize an image using the GetThumbnailImage() method of the Image class. Using this method and an ASP.NET Web page designed for displaying images, we retooled an earlier demo to allow for the images to be dynamically resized, as opposed to just scaling the image through the <img> tag's height and width attributes.

    Happy Programming!

  • By Scott Mitchell

  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article