How do you square an uploaded photo without padding with white space, in C#?

Question

In my site, users can upload photos. I currently compress and resize the photo to make sure they aren't huge files. But this creates photos that are of varying dimensions... which makes the site a bit "ugly" in my opinion.

I'd like to ensure the thumbnails are square images, but not by using padding. It's ok if there is some loss of the photo in the thumbnail. I'd like to keep the fidelity of the photo high, even if it means some cropping needs to occur.

One little tip from doing this on a site once: if the original image is wider than it is tall, crop an equal amount from each side. But if the original image is taller than it is wide, crop more from the bottom than from the top, and in my experience, you'll be less likely to lose valuable detail (e.g. in a portrait photo, you'll crop off the subject's legs rather than their face!) — Carson63000, Aug 06 '10 at 01:04
@Carson63000 - you rock, that is an excellent point to keep in mind. Thank you! — Chaddeus, Aug 06 '10 at 01:36

score 3 · Accepted Answer · answered Aug 06 '10 at 00:08

I wrote some code to do this exact thing. I chose to crop it because resizing without preserving aspect ratio looks pretty horrible. I do a crop then a resize to create a thumnail image:

  public Bitmap CreateThumbnail(Bitmap RawImage)
    {
        int width = RawImage.Width;
        int height = RawImage.Height;

        Size ThumbnailDimensions = new Size();
        ThumbnailDimensions.Width = 100;
        ThumbnailDimensions.Height = 100;

        Rectangle cropArea = new Rectangle();
        if (width > height)
        {               
            cropArea.Width = height;
            cropArea.Height = height;
            cropArea.X = 0;
            cropArea.Y = 0;                
        }
        else if (width < height)
        {
            cropArea.Width = width;
            cropArea.Height = width;
            cropArea.X = 0;
            cropArea.Y = 0;
        }
        if(width != height) Bitmap thumbnail = CropImage(RawImage, cropArea);

        thumbnail = ResizeImage(thumbnail, ThumbnailDimensions);
        return thumbnail;
    }

This just crops from the top left corner then resizes it to my thumbnail dimensions.

That's pretty much exactly what I was looking for, thanks a ton! — Chaddeus, Aug 06 '10 at 01:35
@Andrey Seriously. Not sure how this is the accepted answer when there's implementation missing from the code. — keeehlan, Feb 04 '14 at 17:08
@Aliester I think this doesn't contains the answer because there are no implementations for CropImage and ResizeImage method. — RajeshKannan, Nov 11 '14 at 05:42

score 2 · Answer 2 · edited May 23 '17 at 12:30

2

I would imagine you need to take the shortest dimension (either w or h), and use that as your dimension for creating the cropped image, essentially you can crop and then scale the image. Check out this article as an example for cropping an image. Also check out this Stack Overflow question regarding image quality.

edited May 23 '17 at 12:30

Community

1
1

answered Aug 05 '10 at 23:58

Matthew Abbott

60,571
9
104
129

That's a great point, use the shortest dimension for the crop settings. Thanks. – Chaddeus Aug 06 '10 at 01:31

score -1 · Answer 3 · answered Aug 05 '10 at 23:57

-1

Rather than cropping, I would make the div or whatever you put them in a fixed square size. Scale the image to fit inside that square.

How would you decide to crop it? From the top-left? Bottom-right? Center?

answered Aug 05 '10 at 23:57

µBio

10,668
6
38
56

I don't want to do on-client scaling - as it's a performance issue. I plan to crop from top left using the shortest dimension as the size, square. Then as Carson6300 mentioned, if it's wider than taller, crop equal from each side. If it's taller than wide, crop mostly from the bottom. – Chaddeus Aug 06 '10 at 01:38
The problem with this is if you are taking a large image and just scaling it down the browser still loads the large image. Multiply that by a few images and your website load speeds tank. – Adrian Aug 06 '10 at 05:06
@Chad, @antonlavy - Where in my answer did I say client side scaling? – µBio Aug 09 '10 at 16:05
from the sound of the answer, imo, you were referring to setting the size on the div and letting that determine the size of the image. – Chaddeus Aug 10 '10 at 02:13

score -1 · Answer 4 · answered Aug 06 '10 at 00:03

To make a rectangle into a square you need to either pad, resize without preserving aspect ratio or crop (or combinations).

Here's some code for cropping

http://snippets.dzone.com/posts/show/1484

(I work for Atalasoft -- in our DotImage Photo SDK), it's

AtalaImage img = new AtalaImage("filename.jpg");
AtalaImage img2 = new CropCommand( /*point and size of crop */).Apply(img).Image;
img2.Save("filename", new JpegEncoder(quality), null);

How do you square an uploaded photo without padding with white space, in C#?

4 Answers4