In Part 1 we looked at how to display the images in a directory
on a Web page. However, if the images are a variety of sizes, with some being too large, the resulting
formatting is anything but eye-pleasing. In this final part, we'll examine how to dynamically resize the
images using the .NET Framework's Image class.
(Note that we won't be resizing the actual image file,
but specifying the img tag's height and width attributes accordingly.
To see how to actually resize an image, be sure to read the article: True Image Resizing.)
Determining an Image's Width and Height
What we want to be able to do is specify some maximum height and width constraints, and require that
all images fit within those constraints. Since in our previous live demo we displayed a DataList with
three columns, perhaps we'd want to limit the resulting HTML table to 600 pixels, meaning each image
should be no more than 200 pixels in width. Also, let's assume that we don't want any image greater
than 200 pixels in height.
Now, we need to be able to determine if one the image's we're about to display has a height or width
greater than the allowed amount (200 pixels). If it does, then we need to scale the image's height
and width so that it fits within the constraints. To determine an image's height and width, we can use
the Image class. The following code creates a new instance of the Image class
from the specified file:
Dim myImage as Image = Image.FromFile(physical path to image file)
Once we have an instance of the Image class we can determine the height and width of the
image by checking the Height and Width properties. The following code
iterates through all of the GIF files in the IMAGE_DIRECTORY directory and dynamically
determines the property height and width for the image.
Const IMAGE_DIRECTORY as String = "/images/"
Const maxWidth as Integer = 200
Const maxHeight as Integer = 200
Dim pics as ArrayList = new ArrayList()
Dim s as String, html as String
Dim imgHeight, imgWidth as Integer
For Each s in System.IO.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
'Determine what dimension is off by more
Dim deltaWidth as Integer = imgWidth - maxWidth
Dim deltaHeight as Integer = imgHeight - maxHeight
Dim scaleFactor as Double
If deltaHeight > deltaWidth then
'Scale by the height
scaleFactor = maxHeight / imgHeight
Else
'Scale by the Width
scaleFactor = maxWidth / imgWidth
End If
imgWidth *= scaleFactor
imgHeight *= scaleFactor
End If
html = "<a href=""" & IMAGE_DIRECTORY & System.IO.Path.GetFileName(s) & """>" & _
"<img src=""" & IMAGE_DIRECTORY & System.IO.Path.GetFileName(s) & """" & _
"height=""" & imgHeight & """ width=""" & imgWidth & """>" & _
"</a>"
pics.Add(html)
Next
The above code works in the following manner: each image's height and width is checked to see if
either exceeds the maximum constraints. If neither do, then the image is shown at its actual size.
If either of them do, though, the delta between the image's actual height and width and the maximum
allowed height and width is computed. The largest delta is then used to determine how the
scaling factor is computed.
So, if an image has a height of 300 and a width of 500, and the maximum height and width is 200, then
the width delta is 300 (500 - 200) and the height delta is 100 (300 - 200). Since the width delta is
larger than the height delta, the scaling factor is the max width divided by the image's width (200 / 500, or
0.4). The image's height and width are then multiplied by this scaling factor to determine the images
new scaled height and width. For this particular examples, the image's new height would be 120
and the width would be 200. By multiplying both the height and width by this one scale factor, the image's
height to width ratio is preserved.
Conclusion
In this article we examined two things: how to enumerate the files in a directory, and how to
dynamically determine an image's height and width attributes. With these two bits of knowledge,
this article demonstrated how to create an ASP.NET Web page that would list images from a directory
in a three-columned HTML, where the images were guaranteed to be displayed no larger than 200x200 pixels.
For more information on working with images in ASP.NET consider reading
Saving Dynamically Created Images on the Web Server,
which is from a sample chapter from the book
ASP.NET: Tips, Tutorials, and Code.
Now that you have finished this article, be sure to read the follow-up article,
True Image Resizing, in which we'll examine how to use the
Image class's GetThumbnailImage() method to create an actual thumbnail of
an image on-the-fly!
