|
Creating a dynamic thumbnail generator (ASP.Net) |
|
|
Written by: Justin Rich
Creating a dynamic thumbnail generatorWeb developers and web designers have been getting merged into one job title in the past 5 to 10 years and in doing this, many of us are becoming the ones responsible for taking the images for products and scaling and trimming them down to a size that will fit on our websites. Many people have tried to avoid this by just scaling the images to a set height or width, but that method looks bad and also can make load time very slow (because the images can be several MB).
My answer to this is a new ASPX page in your site... I would just call it image.aspx for simplicity. This new web page will be used for the .Net Drawing functionality. The first thing you will want to do is add the correct references to your page:
Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.Drawing.Drawing2D
Imports System.IO
After you've included this, then the next step is to receive the image you wish the thumbnail to be as the image path. You're probably already passing this path directly. In the code below, I'm accepting the Request object as a string representing the image path, and then checking to see if the file exists. If it doesn't exist, I've got a generic 'No Image' thumbnail to place in that spot. This also helps in maintenance of the images to know what is missing without the ugly red X's. Finally in this code below, I'm using one of the Drawing functions to get the height and width of the image that I loaded.
Dim imagePath As String = Request("image")
Dim imageWidth As Integer
Dim imageHeight As Integer
If Not File.Exists(Server.MapPath(imagePath)) Then
imagePath = "images/noImage.jpg"
End If
Dim i As System.Drawing.Image = System.Drawing.Image.FromFile(Server.MapPath(imagePath))
Dim myFormat = i.RawFormat
Response.ContentType = "image/jpeg"
imageWidth = i.Width
imageHeight = i.Height
Now that we've loaded an image and know its dimensions, we can easily resize it. What I like to do is store the preferred thumbnail dimensions in the web.config file so that changing the size on the site is just a matter of changing a flag in our web.config. You can either pass this as a parameter to the image.aspx page or you can directly call the web.config setting in your code using the configuration manager. In my code below, I'm just going to assume I passed them in as parameters. In order to make sure all of your images are all confined within the constraint of the predefined size, you have to figure out if the image is taller than it is wide or wider than tall. That way, you're only changing its size to the biggest side. This keeps the thumbnails looking more uniform. Finally, in this code, we're pushing this new image back out to the aspx page using the Response.Outstream. You won't have to do anything special to you aspx page to accomplish this.
Dim width as Integer
Dim height as Integer
Dim inSize As Integer
Try
If Not IsDBNull(Request("size")) Then
width = Request("size")
inSize = Request("size")
Else
width = imageWidth
inSize = 0
End If
Catch ex As Exception
width = imageWidth
inSize = 0
End Try
Dim aspectRatio As Double = width / imageWidth
height = imageHeight * aspectRatio
If height > inSize And inWidth <> 0 Then
height = inSize
aspectRatio = height / imageHeight
width = imageWidth * aspectRatio
End If
Dim imgOut As New Bitmap(i, width, height)
imgOut.Save(Response.OutputStream, myFormat)
imgOut.Dispose()
i.Dispose()
You will find that this code helps keep the bandwidth lower on the front end and your server is what is handling the bigger load. I wouldn't suggest using files that are more than 1MB as you will begin to see your server start to lag when you're loading a catalog page that has dozens of items on it, but this will save you from having to create multiple sizes of each image for the various places on the website that you would be displaying at small, larger, and full. This function actually works to make the image bigger than it actually is as well (though it will lose quality obviously).
You link to the aspx page just like you do an image in the HTML:
<img src='image.aspx?image=images/bigImage.jpg&size=120'>
You can also paste that URL directly to your browser and it will display just the image on the screen. This has been extremely useful to me over the years. |
|
|
|
|
|