Published: Friday, January 12, 2001
Proportional Image Resizing within a Constrained Area
By Mike Shaffer
History
The IMGSZ code presented in my earlier article,
Determining Image Properties in ASP, was written in
response to my need to be able to fit images proportionally within a given area. My client
had asked me to develop a photo gallery application for their site, and the photo gallery
was to display photos surrounded by a complex graphical 'photo album' motif. As a result, all
photos (regardless of their original size) needed to 'fit' within a defined pixelspace.
(For information on creating a simple photo gallery, be sure to check out:
Creating a Picture Gallery using the Content Linking Component!)
Many questions ensued: So how would I accomplish that within HTML? Would I need to buy a
component? And is 'pixelspace' even a real word? Although I mentioned the possibility of
enhancing the IMGSZ routines to allow for proportional resize, I left it up to the readers of
that original article to enhance those routines to do the propertional sizing. However,
so many of you have asked for the resizing routine that I am pleased (relieved?) to
offer it here now.
Why Do I Need It?
If you are just learning HTML (or any of its younger variants) you already know that the IMG
tag has HEIGHT and WIDTH properties that can be used to force an
image to a particular size. However, it has no easy way to do a proportional resize that fits
in a desired area. For example, let's say you're showing images in a table for an on-line
product catalog. To make things look nice, you're defining the size of the image presented to
100x75 pixels. So you may decide to use WIDTH="100" HEIGHT="75" in your IMG
tag for each picture. What will happen is that images may get squashed or stretched in ways
that you (and your customers) do not find pleasing. This IMGSZ add-on function will allow you
to overcome that problem.
How Does It Work?
The ImageResize function is passed an image filename, a maximum width and a
maximum height. The function returns either a HEIGHT=xxx or a WIDTH=xxx
string that you embed in your IMG tag to provide the proportional resize.
So How Do I Use It?
Using the function can be as simple as embedding a function call in your IMG tag.
For example, the following code will present an image proportionally in a 100x75 pixel area:
response.write "<img src=""graphic.gif"" " & ImageResize(strImageName, 100, 75) & ">"
|
The parameters passed to the function are as follows:
ImageResize Parameters |
|---|
| Property | Description |
|---|
strImageName | The actual filename (on the server's drives)
of the image you will display |
intDesiredWidth |
The width constraint |
intDesiredHeight | The height constraint |
As a further example, let's look at some simple test code. This code will look at your
server's C:\ drive, root directory, and display all GIF images that it finds
there in a table. The images will be proportionally resized to fit within a 75x45 pixel area.
Be sure to view the live demo!
<%
':::::::::::::::::::::::::::::::::::::::::::::::::::::::::
'::: :::
'::: SCRIPT: testpropresize.asp :::
'::: AUTHOR: shaffer :::
'::: DATE: 11-Jan-01 :::
'::: PURPOSE: Test/show the operation of the resize :::
'::: (proportional) function :::
'::: :::
':::::::::::::::::::::::::::::::::::::::::::::::::::::::::
%>
<!--#INCLUDE FILE='imgsz.asp'-->
<!--#INCLUDE FILE='propresize.asp'-->
<%
' To test, we'll just try to show all files with a .GIF
' extension in the root of C: by fitting them to a common
' area (75 pixels x 45 pixels)
dim objFSO, objF, objFC
dim f1, w, h, c, strType
Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objF = objFSO.GetFolder("c:\")
Set objFC = objF.Files
response.write "<table border=""1"" cellpadding=""5"">"
For Each f1 in objFC
if instr(ucase(f1.Name), ".GIF") then
response.write "<tr><td>" & f1.name & "</td><td>" & _
f1.DateCreated & "</td><td>" & f1.Size & "</td><td>"
if gfxSpex(f1.Path, w, h, c, strType) = true then
response.write w & " x " & h & " " & c & " colors</td>"
response.write "<td><img src=""" & f1.Path & """ " & _
ImageResize(f1.Path, 75, 45) & " border=""1""></td>"
else
response.write " </td><td align=""center"">bad image</td>"
end if
response.write "</tr>"
end if
Next
response.write "</table>"
set objFC = nothing
set objF = nothing
set objFSO = nothing
%>
|
[
View the live demo!]
Enough Yakking, Show Me The Code!
The code for the function (below) is quite simple, really. Here is a description of the steps
it follows to do its magic:
1.) First, call the gfxSpex function (contained in IMGSZ.ASP) to determine
the height and width (and color depth and validity!) of the image.
2.) Determine the target image ratio and the file's image ratio
(width divided by depth)
3.) If the file's image ratio is greater-than the target image ratio,
then we know that we have to size proportionally based on WIDTH,
otherwise we size proportionally based on HEIGHT (and if it was
not a valid image, return an empty resize string)
Oops! I'm yakking again, here's the code, already!
function ImageResize(strImageName, intDesiredWidth, intDesiredHeight)
dim TargetRatio
dim CurrentRatio
dim strResize
dim w, h, c, strType
if gfxSpex(strImageName, w, h, c, strType) = true then
TargetRatio = intDesiredWidth / intDesiredHeight
CurrentRatio = w / h
if CurrentRatio > TargetRatio then ' We'll scale height
strResize = "width=""" & intDesiredWidth & """"
else
' We'll scale width
strResize = "height=""" & intDesiredHeight & """"
end if
else
strResize = ""
end if
ImageResize = strResize
end Function
|
[
Download the code]
Caveats
You can integrate the PROPRESIZE.ASP contents into the
IMGSZ.ASP code if you like.
Note that this does NOT perform an actual resize of the graphical image file, only the
visual representation of the image. What this means is that if you have an image that is
800x600x24 bits which is 1 megabyte in size, and you ask the routine to scale the image to
a 100x75 pixel area, you will STILL be downloading that entire 1 megabyte of picture information
from the server. If you want to do TRUE thumbnail file creation (on disk) you will need
to obtain any one of the graphical components available today that offer this feature.
Happy Programming!
By Mike Shaffer
Attachments:
View the live demo
Download propresize.asp in text format
Download imgsz.asp in text format
Read Determining Image Properties in ASP
