Fog Creek Software
Discussion Board

Welcome! and rules

Joel on Software

resizing an image on a webform

What's the best way to accomplish this. Here's a basic timeline of events:

-When registering with the site, the user may upload an image file for their logo. At this point I keep the file as is.
-When looking a profile, the logo is displayed and at this point I'd like to resize it if it's over a certain size.

Mainly I'd like to resize on view instead of insert so that if the original image is ever needed, it's available. What do you think?

I'm actually taking this project over from someone no longer with the company, so the following is my best understanding of how it works (it's pretty simple, so i'm not too worried).
-The filename is stored in a db, and the file on the webserver. When needed for viewing, if the filename isn't "" (aka, there is a logo for this client) then the imageurl is loaded into a System.Web.UI.WebControls.Image and displayed.

I've looked but it doesn't seem to me that you can modify the Width and Height properties of the image webcontrol (or at least, it didn't do anything when I tried). Am I missing something? The following is my code, where imgLogo is the Image w/ url set to the correct path to the image, and resize is a boolean for whether or not the image needs to be resized. The language is Any help in vb or c# would be appreciated.

'resize image upon display
      imageW = imgLogo.Width.Value
      imageH = imgLogo.Height.Value
      While (imageW > 256.0) Or (imageH > 256.0)
        imageW = imageW * 0.8
        imageH = imageH * 0.8
        resize = True
      End While
      If resize Then
        imgLogo.Width = New Unit(imageW)
        imgLogo.Height = New Unit(imageH)
      End If

Monday, April 18, 2005

I think you're confusing the Image web control with the image itself. An HTML tag, as you know, looks like this:
<img src="mylogo.gif" width="50px" heigh="50px" />

When you reference imgLogo.Width, you're going to get that "50px", no matter how big "mylogo.gif" really is.

What you need to do is use the System.Drawing.Bitmap object to look at the image itself, and then change the imgLogo properties based on the Bitmap object.

For example (and ImagePath is the path and name of the image):

//open the image
System.IO.FileStream stream = new System.IO.FileStream(ImagePath, System.IO.FileMode.Open, System.IO.FileAccess.Read);
System.Drawing.Bitmap image = (Bitmap) System.Drawing.Image.FromStream(stream);

//set the imgLogo properties
float imageW = image.Width;
float imageH = image.Height;

//Scale down
while ((imageW > 256.0) | (imageH > 256.0))
        imageW = imageW * 0.8
        imageH = imageH * 0.8

//Set imgLogo tag
imgLogo.Width = New Unit(imageW)
imgLogo.Height = New Unit(imageH)

...or something like that.

Monday, April 18, 2005

Depends on why you're trying to do it.

If the goal is to save bandwidth, then you need to resize it on the server, not change the IMG parameters. Thankfully, the graphics classes in .NET can read most any image type you need, and can do fairly decent quality resizing.

Brad Wilson [MSFT]
Monday, April 18, 2005

The why was just so that when clients upload images, if they're ridiculously large that they'll be scaled down to a more reasonable size.

I ended up doing the scaling as soon as they upload the file. Was informed of a dll written by a coworker that has various fn's that are helpful. Ended up calling a fn to constrain the image size (aka resize only if it's bigger than a certain size). Total lines of code 5. There were some other things that needed to be done before calling that fn but still a much more elegant solution than I was looking at.

Now I'll be happy if I never have to touch this project again, as it was written by an intern who didn't feel the need to follow the standards in place, who felt it was better to call fn's many many times over than to put the result in a variable for reuse, and who is no longer here.

Thanks for your help.

Tuesday, April 19, 2005

*  Recent Topics

*  Fog Creek Home