ASP.NET Image Resizing

Question

Hello,

We need the ability to gracefully resize any photo/image to an exact width/height without skewing the image. We can use either a third-party solution, or we can use the built-in .NET functionality to handle this. I thought there had to be an easy solution to this without having to program a complex algorithm.

Example Scenario (We want all uploads to be resized to 200x100 pixels)
Landscape photo with dimensions at 1250x800:
Resizing the width to 200px would proportionately put the height at 128px so that extra 28px would be cropped off of the top and bottom.

Landscape photo with dimensions at 1250x500:
Resizing the width to 200px proportionately put the heigth at 80px so we would need to catch that and resize by height first. Putting the height at 100px would proportionately put the width at 250px. The extra 50px would need to be cropped off of the sides of the photo.

Portrait photo with dimensions at 800x950:
Resizing the width to 200px would proportionately put the height at 238px so that extra 138px would be cropped off of the top and bottom.

Answer 1

If I were at home I'd give you my code for handling this.

However, you can find something similar to what you're looking for here: http://www.codeproject.com/KB/aspnet/resizeimg_emanuele_briano.aspx

Edit

This is a better link. http://www.codeproject.com/KB/graphics/ImageResizingManager.aspx

Answer 2

You can do this using the Bitmap class, like this:

using (Bitmap original= new Bitmap(...)) {   //A stream or a filename
    //Calculate the desired size using original.Height and original.Width

    Bitmap newImage = new Bitmap(newWidth, newHeight);

    using(Graphics g = Graphics.FromImage(newImage) {

Call this overload of g.DrawImage to draw the clipped portion of the original image to the new image.

    }
}

Answer 3

I wouldn't crop anything. For example in your first case I would resize the edge that is higher than the desired aspect ratio first. Stuff wont scale well if you change the aspect ratio at such a small size, so I wouldn't mess with it.

Resize the 1250x800 image to 156.25x100. The resulting image can then be centered within the 200x100 frame. If this is a user doing the task you can have some preview option that lets them see if their scaled image fits within the desired bounds

Answer 4

GDI+ works fine in ASP.NET. (WPF used to, but doesn't now).

The algorithm for fitting an image into a given rectangle isn't too tricky: work out the ratios of width/height for both the image and the target, then resize based on either width or height. Obviously which you choose depends on whether you want to fit in the target, or cover the target.

Also, I found that a stack-based approach worked nicely for representing the transforms:

http://www.hackification.com/2008/10/29/stack-based-processing-part-2/

Answer 5

I ran into this exact same thing sometime ago. Here's the article I used to do high quality image resize with .net. JPG images work the best. Didn't have good results with GIF images.

I've searched around a lot to find solutions for high quality resize. Many of the code that's out there creates pixelated image if you have odd resolution.

It is your choice to either crop or have white space. I chose to do crop because I didn't like white space. Looks ugly. It works well most of the time if you have the image centered and crop either top&bottom or left&right.

Here's a short article on cropping image.

I have working code that I currently use, but I cannot get to it at the moment. Maybe I'll add my own code later.