3

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.

2
  • 2
    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!) Aug 6, 2010 at 1:04
  • @Carson63000 - you rock, that is an excellent point to keep in mind. Thank you!
    – Chaddeus
    Aug 6, 2010 at 1:36

4 Answers 4

3

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.

4
  • That's pretty much exactly what I was looking for, thanks a ton!
    – Chaddeus
    Aug 6, 2010 at 1:35
  • 5
    Where is the implementation of "CropImage"?
    – Andrey
    Dec 21, 2011 at 22:51
  • 1
    @Andrey Seriously. Not sure how this is the accepted answer when there's implementation missing from the code.
    – keeehlan
    Feb 4, 2014 at 17:08
  • @Aliester I think this doesn't contains the answer because there are no implementations for CropImage and ResizeImage method. Nov 11, 2014 at 5:42
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.

1
  • That's a great point, use the shortest dimension for the crop settings. Thanks.
    – Chaddeus
    Aug 6, 2010 at 1:31
-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?

4
  • 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 6, 2010 at 1: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 6, 2010 at 5:06
  • @Chad, @antonlavy - Where in my answer did I say client side scaling?
    – µBio
    Aug 9, 2010 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, 2010 at 2:13
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.