ASP.Net MVC Image Upload Resizing by downscaling or padding

Question

A user will be able to upload an image. If the image is greater than a set size I want to downsize it to that size. Obviously it doesn't have to match exactly due to ratios, the width would be the key size so the height would be variable.

If the image is smaller than the set size I would like to create a new image to the set size with a background of a defined colour and then centre the uploaded image into it therefore the result is the original with paddded colour.

Any code examples or links greatly appreciated

Just one line of code with this lib. This resizes the image down to the specified width if bigger, and simply expands the canvas if the image is smaller. ImageBuilder.Current.Build(postedFile, destination, new ResizeSettings("width=500&scale=upscalecanvas&bgcolor=green")); Here is a live example. — Lilith River
– Lilith River, Commented May 28, 2011 at 16:15

David · Accepted Answer · 2009-06-17 14:07:08Z

Here's a snippet of code I quickly knocked up for resizing it based on the width. I'm sure you could figure out how to add a background color to the Bitmap. It's not complete code but just an idea of how to do things.

public static void ResizeLogo(string originalFilename, string resizeFilename)
{
    Image imgOriginal = Image.FromFile(originalFilename);

    //pass in whatever value you want for the width (180)
    Image imgActual = ScaleBySize(imgOriginal, 180);
    imgActual.Save(resizeFilename);
    imgActual.Dispose();
}

public static Image ScaleBySize(Image imgPhoto, int size)
{
    int logoSize = size;

    float sourceWidth = imgPhoto.Width;
    float sourceHeight = imgPhoto.Height;
    float destHeight = 0;
    float destWidth = 0;
    int sourceX = 0;
    int sourceY = 0;
    int destX = 0;
    int destY = 0;

    // Resize Image to have the height = logoSize/2 or width = logoSize.
    // Height is greater than width, set Height = logoSize and resize width accordingly
    if (sourceWidth > (2 * sourceHeight))
    {
        destWidth = logoSize;
        destHeight = (float)(sourceHeight * logoSize / sourceWidth);
    }
    else
    {
        int h = logoSize / 2;
        destHeight = h;
        destWidth = (float)(sourceWidth * h / sourceHeight);
    }
    // Width is greater than height, set Width = logoSize and resize height accordingly

    Bitmap bmPhoto = new Bitmap((int)destWidth, (int)destHeight, 
                                PixelFormat.Format32bppPArgb);
    bmPhoto.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);

    Graphics grPhoto = Graphics.FromImage(bmPhoto);
    grPhoto.InterpolationMode = InterpolationMode.HighQualityBicubic;

    grPhoto.DrawImage(imgPhoto,
        new Rectangle(destX, destY, (int)destWidth, (int)destHeight),
        new Rectangle(sourceX, sourceY, (int)sourceWidth, (int)sourceHeight),
        GraphicsUnit.Pixel);

    grPhoto.Dispose();

    return bmPhoto;
}

Needs exception handling and Jpeg encoding settings.... nathanaeljones.com/163/20-image-resizing-pitfalls

Bryan Rowe · Accepted Answer · 2009-06-17 13:58:34Z

0

You can just load the file into a bitmap object:

http://msdn.microsoft.com/en-us/library/system.drawing.bitmap.aspx

Then just check the width on the object. For the second part of your problem, I would recommend using a tool like ImageMagick

http://www.imagemagick.org/script/index.php

to accurately resize the first image or to create the background image and merge the two images together.

answered Jun 17, 2009 at 13:58

Bryan Rowe

9,3634 gold badges28 silver badges34 bronze badges

Collectives™ on Stack Overflow

ASP.Net MVC Image Upload Resizing by downscaling or padding

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related