Click here to Skip to main content
11,932,103 members (58,609 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


83 bookmarked

An Easy to Use Image Resizing and Cropping Control

, 31 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Allows users to load, resize, and crop an image in "real time" with the bloat and complexity of other programs

The Problem

You need to allow users of your desktop app (WinForms) to resize and/or crop large pictures from within your software, perhaps to allow them to upload professional headshots that need to be of a uniform size or type. Installing and/or instructing the user base on using third party software is not an option.

The Solution

Normally, I would never dream of creating yet another image editing program. However, I found myself in a position where, given the user base, it made sense to create a control that would quickly and easily let users crop out a head shot of a person taken with the average digital camera. The driving force behind this solution was to prevent people from uploading pictures that were too large, both in dimension and file size.


  • Easy to use interface.
  • Image resizing done in "real time"; no guessing based on percentages.
  • Required image dimensions can be set at design or runtime. Ensures users will load images of the proper size.
  • Supports loading of and saving to BMP, JPG, GIF, PNG, and TIF files.
  • Initially resizes image to fit in workspace.

Using the Control

The control can be used out of the box by simply dropping it onto a form and docking it. To integrate it into your solution, simply add it to your form, subscribe to the WorkComplete event, and call GetEditedImage.

imageResizer1.WorkComplete += 
   new ImageResizer.WorkCompleteDelegate(imageResizer1_WorkComplete);

void imageResizer1_WorkComplete(object sender, bool complete)
    if (complete)
        pictureBox1.Image = imageResizer1.GetEditedImage();
        // your processing here...
    else // user cancelled
        pictureBox1.Image = null;

    imageResizer1.Visible = false;
    pictureBox1.Visible = true;

Points of Interest

Normally, it is a pain to do custom drawing inside the Paint event of a form. However I "cheated" by using a GroupBox to track the dimensions of the workspace. The GroupBox is anchored so as the control is resized, my coordinates are tracked automatically, and I don't have to worry about drawing outside the boundary. Here is the Paint method for those that are interested:

private void ImageResizer_Paint(object sender, PaintEventArgs e)
    // Draws alternating shaded rectangles so user
    // can differentiate canvas from image.
    bool xGrayBox = true;
    int backgroundX = 0;
    while (backgroundX < grpImage.Width)
        int backgroundY = 0;
        bool yGrayBox = xGrayBox;
        while (backgroundY < grpImage.Height)
            int recWidth = (int)((backgroundX + 50 > grpImage.Width) ?
            grpImage.Width - backgroundX : 50);

            int recHeight = (int)((backgroundY + 50 > grpImage.Height) ?
            grpImage.Height - backgroundY : 50);

            e.Graphics.FillRectangle(((Brush)(yGrayBox ?
            Brushes.LightGray : Brushes.Gainsboro)),
            backgroundX, backgroundY, recWidth + 2, recHeight + 2);

            backgroundY += 50;
            yGrayBox = !yGrayBox;
        backgroundX += 50;
        xGrayBox = !xGrayBox;

    if (!SuspendRefresh && DrawnImage != null)
        // if the image is too large, draw only visible portion
        // as dictated by the scrollbars, otherwise draw the whole image.
        if (DrawnImage.Width > grpImage.Width || 
            DrawnImage.Height > grpImage.Height)
            int rectX = 0;
            if (hsbImage.Value > 0)
                rectX = hsbImage.Value;
            int rectY = 0;
            if (vsbImage.Value > 0)
                rectY = vsbImage.Value;
            e.Graphics.DrawImage(DrawnImage, 0, 0,
            new Rectangle( rectX, rectY, grpImage.Width, grpImage.Height),
            e.Graphics.DrawImage(DrawnImage, 0, 0);

        // Draw the crop rectangle with both yellow and black 
        // so it is easily visible no matter the image.
        if (chkCrop.Checked)
            e.Graphics.DrawRectangle(Pens.Yellow, CropBoxX, 
            CropBoxY, (float)nudCropWidth.Value, (float)nudCropHeight.Value);

            e.Graphics.DrawRectangle(Pens.Black, CropBoxX - 1, CropBoxY - 1,
            (float)nudCropWidth.Value + 2, (float)nudCropHeight.Value + 2);


  • 29th October, 2008: Initial post
  • 31st October, 2008: Download files updated


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Josh Fischer
United States United States
CodeProject MVP 2010
CodeProject prize winner - Best C# article of December 2009

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Britteandy28-Aug-13 0:48
memberBritteandy28-Aug-13 0:48 
Generalresize cropbox with mouse event Pin
Babita Shivade15-Apr-09 21:35
memberBabita Shivade15-Apr-09 21:35 
GeneralSet back ground color in non cropped area of image. Pin
Babita Shivade15-Apr-09 2:55
memberBabita Shivade15-Apr-09 2:55 
Generalwant to add circle in place of rectangle at the time of cropping. Pin
Babita Shivade13-Apr-09 23:34
memberBabita Shivade13-Apr-09 23:34 
GeneralRe: want to add circle in place of rectangle at the time of cropping. Pin
Josh Fischer14-Apr-09 5:56
memberJosh Fischer14-Apr-09 5:56 
GeneralSome nice ideas but implementation is wanting Pin
dhaag4-Jan-09 22:03
memberdhaag4-Jan-09 22:03 
GeneralHopefully it's a typo ;-) Pin
gholbrook5-Nov-08 7:39
membergholbrook5-Nov-08 7:39 
GeneralRe: Hopefully it's a typo ;-) Pin
Josh Fischer5-Nov-08 8:22
memberJosh Fischer5-Nov-08 8:22 
GeneralThats a nice UI Pin
defwebserver3-Nov-08 18:35
memberdefwebserver3-Nov-08 18:35 
GeneralNice work! Pin
tptshepo30-Oct-08 2:49
membertptshepo30-Oct-08 2:49 
GeneralRe: Nice work! Pin
Stumproot4-Nov-08 4:54
memberStumproot4-Nov-08 4:54 
GeneralRe: Nice work! Pin
Josh Fischer4-Nov-08 6:55
memberJosh Fischer4-Nov-08 6:55 
GeneralRe: Nice work! Pin
niketrk20-Nov-08 19:12
memberniketrk20-Nov-08 19:12 
GeneralRe: Nice work! Pin
Josh Fischer21-Nov-08 7:53
memberJosh Fischer21-Nov-08 7:53 
GeneralUpload Application Pin
Harshdeep Mehta (4700787)29-Oct-08 11:41
memberHarshdeep Mehta (4700787)29-Oct-08 11:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151126.1 | Last Updated 31 Oct 2008
Article Copyright 2008 by Josh Fischer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid