Crop and resize an image in ASP.NET

Posted on August 20, 2007 23:57 by Michael

I have just spent some time implementing a database stored central image library into a web application and this library will be utilised where the application's various content requires associated images.

The main database table for storing the binary image data (and metadata) has multiple binary columns to store different sizes of the image, in a similar vein to photosharing sites like Flickr, where the sizes are as follows: thumbnail, small, medium, large and the original image. In addition to these sizes I wanted to store a square 75x75 pixel representation of the image which would be appropriately cropped. After spending several hours playing with the System.Drawing namespaces and still scratching my head somewhat, I went back to google to try and find some samples (my initial searches didn't find much?!) and eventually came across a good article on The Code Project site which includes a great method which resizes and crops the supplied image.

Here is an example of the code I used which is very useful to have in your code snippets library!... 

protected static System.Drawing.Image ImageCrop(
    System.Drawing.Image imgPhoto, int Width, int Height,
    AnchorPosition Anchor)
{

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

    float nPercent = 0;
    float nPercentW = 0;
    float nPercentH = 0;

    nPercentW = ((float)Width / (float)sourceWidth);
    nPercentH = ((float)Height / (float)sourceHeight);

    if (nPercentH < nPercentW)
    {
        nPercent = nPercentW;
        switch (Anchor)
        {
            case AnchorPosition.Top:
                destY = 0;
                break;
            case AnchorPosition.Bottom:
                destY = (int)(Height - (sourceHeight * nPercent));
                break;
            default:
                destY = (int)((Height - (sourceHeight * nPercent)) / 2);
                break;
        }
    }
    else
   
{
        nPercent = nPercentH;
        switch (Anchor)
        {
            case AnchorPosition.Left:
               
destX = 0;
                break;
            case AnchorPosition.Right:
                destX = (int)(Width - (sourceWidth * nPercent));
                break;
            default:
                destX = (int)((Width - (sourceWidth * nPercent)) / 2);
                break;
        }

   

    int destWidth = (int)(sourceWidth * nPercent);
    int destHeight = (int)(sourceHeight * nPercent); 

    Bitmap bmPhoto = new Bitmap(Width, Height,
       
PixelFormat.Format24bppRgb);
    bmPhoto.SetResolution(imgPhoto.HorizontalResolution,
        imgPhoto.VerticalResolution);

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

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

Related posts

Comments

September 12. 2007 09:08
joe djamasi
Great site, needs more updates though. i will be back to explore the site a bit more. once again...great stuff
September 28. 2007 18:41
Acaz
Hi Michael, I´m from brazil and i have one question for this code,

how do i implemented this code for my web site? this code is only copy and paste? no no, how do I?
Acaz br
September 28. 2007 18:42
Acaz
i wait for you answer in my e-mail, thanks
Acaz br
March 4. 2008 18:16
Satya
Hi Michael,

I have a reqiurement that the user should be able to crop the image dynamically by draging the mouse and I have to do this in ASP.Net.Can u please help me out in this.

Thanks in advance
Satya us
March 26. 2008 22:17
TecnoSiervo
Good aport!
March 28. 2008 13:25
David Perez
cool! Thank you for the script!
May 8. 2008 21:43
Artem
Cool!!!
How do it use with FileUpload?

forexample:

C#
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

public partial class upload : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
// FileUpload1.SaveAs(("D:\\" + FileUpload1.FileName));

}
}

aspx


<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
Artem ua
May 31. 2008 10:24
deepak agrawal
hi michael,
what AnchorPosition object here?
June 2. 2008 22:50
Michael
@deepak: It's an enum...

public enum AnchorPosition { Top, Center, Bottom, Left, Right }

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

July 25. 2008 01:10