Jon's Blog

.NET Development & More

Using ASP.NET and GDI+ to Resize Uploaded Image

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
}

IE8: Image max-width bug

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;  }