Simple Image Editor with Crop and Resize while Maintaining Aspect Ratio

• Download demo project - 16.7 KB
• Download source - 82.44 KB

Introduction

I was developing a project that required adding images to a database. Most of the images were acquired from an 8 megapixel digital camera, so the sizes were quite large.  I originally just re-sized the images proportionally to 1024 x 768 and called it good.  But it bothered me that some images contained busy backgrounds or distractions that could be cropped out. This project is the result of my efforts. 

Background 

Note that I don't claim to have written most of the code for this project. I have stood on the shoulders of giants, and learned and reused code from many different CodeProject articles.  Hopefully, the whole is greater than the sum of its parts. This article is based upon code from ImageResizer.aspx and various CodeProject articles.

Using the Code 

The source code should be fairly self explanatory.

The secret is keeping all of the aspect ratios correct.

private static Image CropImage(Image img, Rectangle cropArea)
{
    try {
	Bitmap bmpImage = new Bitmap(img);
	Bitmap bmpCrop = bmpImage.Clone(cropArea, bmpImage.PixelFormat);
	return (Image)(bmpCrop);
    }
    catch (Exception ex)
    {
	MessageBox.Show(ex.Message, "CropImage()");
    }
    return null;
}

private void saveJpeg(string path, Bitmap img, long quality)
{
    // Encoder parameter for image quality
    EncoderParameter qualityParam = new EncoderParameter(
    System.Drawing.Imaging.Encoder.Quality, (long)quality);

    // Jpeg image codec
    ImageCodecInfo jpegCodec = getEncoderInfo("image/jpeg");

    if (jpegCodec == null)
    {
	MessageBox.Show("Can't find JPEG encoder?", "saveJpeg()");
	return;
    }
    EncoderParameters encoderParams = new EncoderParameters(1);
    encoderParams.Param[0] = qualityParam;
  
    img.Save(path, jpegCodec, encoderParams);
}

private ImageCodecInfo getEncoderInfo(string mimeType)
{
    // Get image codecs for all image formats
    ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();

    // Find the correct image codec
    for (int i = 0; i < codecs.Length; i++)
	if (codecs[i].MimeType == mimeType)
   	   return codecs[i];

    return null;
}

private void btnOK_Click(object sender, EventArgs e)
{
    // output image size is based upon the visible crop rectangle and scaled to 
    // the ratio of actual image size to displayed image size
    Bitmap bmp = null;

    Rectangle ScaledCropRect = new Rectangle();
    ScaledCropRect.X         = (int)(CropRect.X / ZoomedRatio);
    ScaledCropRect.Y         = (int)(CropRect.Y / ZoomedRatio);
    ScaledCropRect.Width     = (int)((double)(CropRect.Width) / ZoomedRatio);
    ScaledCropRect.Height    = (int)((double)(CropRect.Height) / ZoomedRatio);

    if (saveFileDialog1.ShowDialog() == DialogResult.OK)
    {
	try
	{
       bmp = (Bitmap)CropImage(pictureBox1.Image, ScaledCropRect);
	   // 85% quality
	   saveJpeg(saveFileDialog1.FileName, bmp, 85);
	}
	catch(Exception ex)
	{
	   MessageBox.Show(ex.Message, "btnOK_Click()");
	}
    }

    if(bmp != null)
         bmp.Dispose();
}

Points of Interest 

There is a transparent crop box that may be dragged by its corners, or moved by left clicking and moving. The aspect ratio of the crop box is determined by the value in the combo box.   The other combo box simply sets the width of the crop box, and the height is determined by the chosen aspect ratio.  The crop box will snap to a proportional aspect ratio when re-sized.

There are some simple image processing features available; rotate, invert color, gray scale, contrast and brightness. 

NOTE: All of my images are landscape, so I have not spent any time on portrait mode resizing conditions in the code.

History

• 28^th December, 2008: Initial release
• 30^th December, 2008: Updated with corrected code