Jon's Blog

Below is some sample code I used to resize an uploaded image if the image does not meet the required width and height.  MAX_WIDTH and MAX_HEIGHT below are constants.  Change them as needed.  I am saving the resized image as a JPEG.  It is also a good idea to inform the user that their image was resized.  I removed that code to increase readability.

Note: In this sample the image is being saved to a database, but you could also save it to a file if you wanted to.

if (fileUpload.HasFile)
{
    // Get uploaded image from upload control
    System.Drawing.Image uploadedImage = System.Drawing.Image.FromStream(fileUpload.PostedFile.InputStream);
    
    // Check width and height of image and resize if necessary
    if (uploadedImage.Width > MAX_WIDTH || uploadedImage.Height > MAX_HEIGHT)
    {
        // Get the factor we must resize by
        decimal heightFactor = Decimal.Divide(uploadedImage.Height, MAX_HEIGHT);
        decimal widthFactor = Decimal.Divide(uploadedImage.Width, MAX_WIDTH);
        decimal resizeFactor = Math.Max(heightFactor, widthFactor);

        // Calculate the new height and width using the resize factor
        int newHeight = Convert.ToInt32(uploadedImage.Height / resizeFactor);
        int newWidth = Convert.ToInt32(uploadedImage.Width / resizeFactor);

        Bitmap sourceBitmap = new Bitmap(uploadedImage);
        Bitmap newBitmap = new Bitmap(newWidth, newHeight);
        Graphics graphics = Graphics.FromImage(newBitmap);
        MemoryStream memoryStream = new MemoryStream();

        try
        {
            // Set quality settings and save to MemoryStream object as Jpeg
            graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphics.CompositingQuality = CompositingQuality.HighQuality;
            graphics.SmoothingMode = SmoothingMode.HighQuality;
            graphics.DrawImage(sourceBitmap, new Rectangle(0, 0, newWidth, newHeight));
            newBitmap.Save(memoryStream, ImageFormat.Jpeg);

            // Save to Business Object
            bizObject.FileData = new Binary(memoryStream.ToArray());
            bizObject.FileType = "image/jpeg";
            bizObject.FileName = Path.GetFileNameWithoutExtension(fileUpload.FileName) + ".jpg";
        }
        catch (Exception)
        {
            throw;
        }
        finally
        {
            // Dispose of graphics objects
            memoryStream.Dispose();
            sourceBitmap.Dispose();
            newBitmap.Dispose();
            graphics.Dispose();
        }
    }
    else
    {
        // Image size is correct, so save what was uploaded
        bizObject.FileType = fileUpload.PostedFile.ContentType;
        bizObject.FileName = fileUpload.FileName;
        bizObject.FileData = new Binary(fileUpload.FileBytes);
    }
    
    // Other code removed for clarity
}

I found a strange IE8 bug dealing with images and the CSS max-width property.  I had an image inside of a table cell.  The image had a max-width set using CSS.  In IE8, if the actual image width was larger than the max-width value then the image was resized properly, but the table cell was not.  It was strange because it worked fine in IE7 and Firefox.  The way I fixed this issue was to wrap the image inside of a div and then set the width of the div to the same value as the max-width of the image.  Oh well, easy enough.

HTML:

<table class="myTable">
    <tr>
        <td class="col1">
            <div class="imageWrapper">
                <img src="images/blah.jpg" class="myImage" />
            </div>
        </td>
        <td class="col2">
            <p>Content here</p>
        </td>
    </tr>
</table>

CSS:

table.myTable .col1 { vertical-align: top; width: 122px; }
table.myTable .col2 { vertical-align: top; width: 353px; padding-left: 5px; }

img.myImage { max-width: 122px; max-height: 172px; }
div.imageWrapper { width: 122px;  }