Crop a picture using a rectangle

Question

I want to crop an image in c#. As in most photo editing software I want to use the rectangle box which can be resized and repositioned via a mouse. In addition, I would like to know how to highlight the cropped area, as show in this photo.

Answer 1

Your image link is no longer available.

So assuming that in a panel you have your picturebox with the image to crop.

First you need to create event handlers for mouse actions to be able to draw a rectangular region which you wish to crop :

private void picBox_MouseDown(object sender, MouseEventArgs e)
    {
        Cursor = Cursors.Default;
        if (Makeselection)
        {
            try
            {
                if (e.Button == System.Windows.Forms.MouseButtons.Left)
                {
                    Cursor = Cursors.Cross;
                    cropX = e.X;
                    cropY = e.Y;

                    cropPen = new Pen(Color.Crimson, 1);
                    cropPen.DashStyle = DashStyle.Solid;
                }
                picBox.Refresh();
            }
            catch (Exception ex)
            {
            }
        }
    }

    private void picBox_MouseUp(object sender, MouseEventArgs e)
    {
        if (Makeselection)
        {
            Cursor = Cursors.Default;
        }
    }

    private void picBox_MouseMove(object sender, MouseEventArgs e)
    {
        Cursor = Cursors.Default;
        if (Makeselection)
        {
            picBox.Cursor = Cursors.Cross;
            try
            {
                if (picBox.Image == null)
                    return;


                if (e.Button == System.Windows.Forms.MouseButtons.Left)
                {
                    picBox.Refresh();
                    cropWidth = e.X - cropX;
                    cropHeight = e.Y - cropY;
                    picBox.CreateGraphics().DrawRectangle(cropPen, cropX, cropY, cropWidth, cropHeight);
                }
            }
            catch (Exception ex)
            {
            }
        }
    }

    private void picBox_MouseLeave(object sender, EventArgs e)
    {
        tabControl.Focus();
    }

    private void picBox_MouseEnter(object sender, EventArgs e)
    {
        picBox.Focus();
    }

Now, comes the button click function for cropping the image :

 private void btnCrop_Click_1(object sender, EventArgs e)
    {
        Cursor = Cursors.Default;

        try
        {
            if (cropWidth < 1)
            {
                return;
            }
            Rectangle rect = new Rectangle(cropX, cropY, cropWidth, cropHeight);
            //First we define a rectangle with the help of already calculated points
            Bitmap OriginalImage = new Bitmap(picBoxScreenshot.Image, picBoxScreenshot.Width, picBoxScreenshot.Height);
            //Original image
            Bitmap _img = new Bitmap(cropWidth, cropHeight);
            // for cropinfo image
            Graphics g = Graphics.FromImage(_img);
            // create graphics
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
            g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
            g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            //set image attributes
            g.DrawImage(OriginalImage, 0, 0, rect, GraphicsUnit.Pixel);

            picBox.Image = _img;
            picBox.Width = _img.Width;
            picBox.Height = _img.Height;
            PictureBoxLocation();
            cropWidth = 0;
        }
        catch (Exception ex){}
    }

 private void PictureBoxLocation()
    {
        int _x = 0;
        int _y = 0;
        if (panel1.Width > picBox.Width)
        {
            _x = (panel1.Width - picBox.Width) / 2;
        }
        if (panel1.Height > picBox.Height)
        {
            _y = (panel1.Height - picBox.Height) / 2;
        }
        picBox.Location = new Point(_x, _y);
        picBox.Refresh();
    }

Answer 2

The outside of the selection box seems to have a black image laid over it with a alpha of about 30%. To do this you would just take each pixel outside of the content area and draw a black pixel with a 30% alpha on top of it. This would give the desired dimmed out effect.

As for how you can get a rectangle to be dynamically seizable in C#.

Answer 3

In order to draw a picture lighter or darker (or alter the colors in any way) you use a ColorMatrix, like this.