To read the article online, visit http://www.4GuysFromRolla.com/webtech/011201-1.shtml

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
PropertyDescription
strImageNameThe actual filename (on the server's drives) of the image you will display
intDesiredWidth The width constraint
intDesiredHeightThe 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


  • Article Information
    Article Title: Proportional Image Resizing within a Constrained Area
    Article Author: Mike Shaffer
    Published Date: Friday, January 12, 2001
    Article URL: http://www.4GuysFromRolla.com/webtech/011201-1.shtml


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers