How To Re-size An Image C#.net Windows Forms

Question

I was wondering, once i load an image into a windows form, is there a way for me to allow the user to drag the corners of that image and re-size it?

Currently, i know about the PictureBox.Scale method (but this is deprecated). I also know about PictureBox.Image.Size. Would this mean that each time they re-size i would need to use PictureBox.Image.Size? Also, how do i allow them to grab the image for re-sizing? I guess i'm thinking about paint and how it allows the user to select the image and then re-size it by dragging the corners...

I'm not looking for a full solution - just some pointers in the right direction (Pseudo code or general description to help my thought process would be fine). I'm not quite sure how to approach this problem.

Here is my code so far:

        using (OpenFileDialog ofd = new OpenFileDialog())
        {
            ofd.Title = "Load Image";

            if (ofd.ShowDialog() == DialogResult.OK)
            {

                PictureBox pictureBox = new PictureBox();
                pictureBox.Image = new Bitmap(ofd.FileName);
                pictureBox.SizeMode = PictureBoxSizeMode.StretchImage;
                pictureBox.Size = pictureBox.Image.Size; 
                panelArea.Controls.Add(pictureBox); 

            }
        }

http://stackoverflow.com/questions/249587/high-quality-image-scaling-c-sharp http://stackoverflow.com/questions/87753/resizing-an-image-without-losing-any-quality http://stackoverflow.com/questions/1922040/resize-an-image-c-sharp http://stackoverflow.com/questions/703873/how-to-proportional-resize-image-of-any-type-in-net — Lost_In_Library, Jan 19 '12 at 07:44

score 6 · Accepted Answer · answered Jan 19 '12 at 13:18

There is already a control in Winforms that can display a bitmap and supports resizing with the mouse: a form. You just need a little bit of surgery to turn it into a control:

        using (OpenFileDialog ofd = new OpenFileDialog()) {
            ofd.Title = "Load Image";

            if (ofd.ShowDialog() == DialogResult.OK) {
                var box = new Form();
                box.TopLevel = box.ControlBox = false;
                box.Visible = true;
                box.BackgroundImage = new Bitmap(ofd.FileName);
                panelArea.Controls.Add(box);
                box.Size = box.BackgroundImage.Size;
            }
        }

Justin · Answer 2 · 2012-01-19T13:22:20.020

Edit: In your case, Hans Passant's method is best. I'll keep my answer up in case you eventually have more complex editing requirements (e.g., dragging multiple shapes)

The interesting part is getting the mouse interaction to work. For now, let's assume you only want to resize by dragging the lower-right hand corner of the image. I would do something like this:

Create a UserControl named, e.g, ImageCanvas. Inside this control, do the following:
Add a field to keep track of the size/location of the image, perhaps Rectangle imageRect

Override the OnPaint method to display your image:

 protected override void OnPaint(PaintEventArgs e)
 {
     e.Graphics.DrawImage(image, imageRect);
 }

Add a field to keep track of when the user is resizing the image, say bool isDraggingSize
Override OnMouseDown, and OnMouseUp. Set or clear isDraggingSize when the mouse button goes down or up, respectively.
Override OnMouseMove to do the following:
- Set the cursor: If isDraggingSize or the mouse pointer is close to the lower right corner of the image, set Cursor = Cursors.SizeNWSE; otherwise, set Cursor = Cursors.Default.
- If isDraggingSize, change the imageSize field based on the mouse location. Call Invalidate(), or Refresh() if necessary, to update the display.
Play around with it, and fix all the little details -- like deciding what happens when the user tries to resize the image larger than the control, and how to get rid of flickering.

Thanks Justin, your solution is still most definitely helpful - glad you left it up. Thanks again! — BigBug, Jan 19 '12 at 15:02

score 0 · Answer 3 · answered Jan 19 '12 at 12:34

 public Bitmap _currentBitmap;

 public void Resize(int newWidth, int newHeight)
    {
        if (newWidth != 0 && newHeight != 0)
        {
            Bitmap temp = (Bitmap)_currentBitmap;
            Bitmap bmap = new Bitmap(newWidth, newHeight, temp.PixelFormat);

            double nWidthFactor = (double)temp.Width / (double)newWidth;
            double nHeightFactor = (double)temp.Height / (double)newHeight;

            double fx, fy, nx, ny;
            int cx, cy, fr_x, fr_y;
            Color color1 = new Color();
            Color color2 = new Color();
            Color color3 = new Color();
            Color color4 = new Color();
            byte nRed, nGreen, nBlue;

            byte bp1, bp2;

            for (int x = 0; x < bmap.Width; ++x)
            {
                for (int y = 0; y < bmap.Height; ++y)
                {

                    fr_x = (int)Math.Floor(x * nWidthFactor);
                    fr_y = (int)Math.Floor(y * nHeightFactor);
                    cx = fr_x + 1;
                    if (cx >= temp.Width) cx = fr_x;
                    cy = fr_y + 1;
                    if (cy >= temp.Height) cy = fr_y;
                    fx = x * nWidthFactor - fr_x;
                    fy = y * nHeightFactor - fr_y;
                    nx = 1.0 - fx;
                    ny = 1.0 - fy;

                    color1 = temp.GetPixel(fr_x, fr_y);
                    color2 = temp.GetPixel(cx, fr_y);
                    color3 = temp.GetPixel(fr_x, cy);
                    color4 = temp.GetPixel(cx, cy);

                    // Blue
                    bp1 = (byte)(nx * color1.B + fx * color2.B);

                    bp2 = (byte)(nx * color3.B + fx * color4.B);

                    nBlue = (byte)(ny * (double)(bp1) + fy * (double)(bp2));

                    // Green
                    bp1 = (byte)(nx * color1.G + fx * color2.G);

                    bp2 = (byte)(nx * color3.G + fx * color4.G);

                    nGreen = (byte)(ny * (double)(bp1) + fy * (double)(bp2));

                    // Red
                    bp1 = (byte)(nx * color1.R + fx * color2.R);

                    bp2 = (byte)(nx * color3.R + fx * color4.R);

                    nRed = (byte)(ny * (double)(bp1) + fy * (double)(bp2));

                    bmap.SetPixel(x, y, System.Drawing.Color.FromArgb(255, nRed, nGreen, nBlue));
                }
            }
            _currentBitmap = (Bitmap)bmap.Clone();
        }
    }

How To Re-size An Image C#.net Windows Forms

3 Answers3