CODEWITHSUNDEEP
asp.netimage-manipulation
Mike Cole
Mike Cole

Reputation: 14753

ASP.NET Image Resizing

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.

Upvotes: 3

Views: 5036

Answers (6)

shamcs
shamcs

Reputation: 629

You can see on this post someone just created sample application to resize image.

They also provide the Class Image Resizer for reference.

Sample Image Resizer in C#
Image Resizer Class C#

Upvotes: 0

Brian Kim
Brian Kim

Reputation: 25376

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.

Upvotes: 0

Ehz
Ehz

Reputation: 2067

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

Upvotes: 0

stusmith
stusmith

Reputation: 14113

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/

Upvotes: 0

David
David

Reputation: 73604

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

Upvotes: 1

SLaks
SLaks

Reputation: 888213

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.

    }
}

Upvotes: 1

Related Questions