none
How to crop and resize the Image

    Question

  • Hi,

          I am importing one image . And then i need to popup one form asking about the croping size and resize the image 
    And then i i want to save the image.
    So i have one form which i am calling right before desplay the image. And then i will get the croping parameters.

    What i want tis how to show croping icon that works in other editers.

    Thank you

    NK

    Monday, July 22, 2013 3:08 PM

Answers

  • Hi NK sharma,

      Welcome to MSDN Forum Support.

      If your scanario is Windows Form, I feel that you can use Picturebox to implement how to crop the image and resize the image.

      Here is my designed idea which I posted some years ago when I am a Onecode project member.

       

    1.The sample should place a source image container such as Picture box control and destination image container, and it needs to place four Textbox controls used to input or show the x axes of the mouse , the y axes of the mouse, cropping image width and cropping image height.

    2.The sample should capture the mouse operations such as mouse up ,mouse down and mouse move.Perform that action need to set the Color of the background behind the frame using Color.Red and its contain the the style of the frame using FrameStyle.Dashed .Currently, it needs to include mouse icon being used for setting cropping points so that it makes it more user friendly.Especially it needs to pay attention to defining Mouse Move event ,you should take into count where the mouse started at and calculate the new position.MeanWhile,you should clear the previous drawn crop lines and draw a new rectangle using ControlPaint.DrawReversibleFrame menthod.Finally, you need to update the coordinates in the textboxes. All above operations want to simulate cropping action,it will draw a rectangle and crop the image by the rectangle.

    You should refer to the following kb article to drawing the focus rectangle,using this approach will allow the user to select the cropping area with the mouse:

    http://support.microsoft.com/kb/314945

    3. When the user clicks the "Crop" button, we use the following code to crop the image from the source picturebox

    Bitmap bit = new Bitmap(sourcePic.Image, sourcePic.Width, sourcePic.Height);
    croppedBitmap = new Bitmap(cropWidth, cropHeight);
    Graphics g = Graphics.FromImage(croppedBitmap);
    g.DrawImage(bit, 0, 0, rect, GraphicsUnit.Pixel);
    pbCrop.Image = croppedBitmap;


    There is a reference about how to crop System.Drawing Bitmaps such as:

    http://msdn.microsoft.com/en-us/library/7wt4bf7h.aspx

      Now we transfer to the other topic regarding resizing the image in PictureBox. You can follow this article which is just talking about that.

      Resizing an Image On-The-Fly using .NET

      


    Jason Wang [MSFT]
    MSDN Community Support | Feedback to us



    Tuesday, July 23, 2013 3:16 AM

All replies

  • Hi NK sharma,

      Welcome to MSDN Forum Support.

      If your scanario is Windows Form, I feel that you can use Picturebox to implement how to crop the image and resize the image.

      Here is my designed idea which I posted some years ago when I am a Onecode project member.

       

    1.The sample should place a source image container such as Picture box control and destination image container, and it needs to place four Textbox controls used to input or show the x axes of the mouse , the y axes of the mouse, cropping image width and cropping image height.

    2.The sample should capture the mouse operations such as mouse up ,mouse down and mouse move.Perform that action need to set the Color of the background behind the frame using Color.Red and its contain the the style of the frame using FrameStyle.Dashed .Currently, it needs to include mouse icon being used for setting cropping points so that it makes it more user friendly.Especially it needs to pay attention to defining Mouse Move event ,you should take into count where the mouse started at and calculate the new position.MeanWhile,you should clear the previous drawn crop lines and draw a new rectangle using ControlPaint.DrawReversibleFrame menthod.Finally, you need to update the coordinates in the textboxes. All above operations want to simulate cropping action,it will draw a rectangle and crop the image by the rectangle.

    You should refer to the following kb article to drawing the focus rectangle,using this approach will allow the user to select the cropping area with the mouse:

    http://support.microsoft.com/kb/314945

    3. When the user clicks the "Crop" button, we use the following code to crop the image from the source picturebox

    Bitmap bit = new Bitmap(sourcePic.Image, sourcePic.Width, sourcePic.Height);
    croppedBitmap = new Bitmap(cropWidth, cropHeight);
    Graphics g = Graphics.FromImage(croppedBitmap);
    g.DrawImage(bit, 0, 0, rect, GraphicsUnit.Pixel);
    pbCrop.Image = croppedBitmap;


    There is a reference about how to crop System.Drawing Bitmaps such as:

    http://msdn.microsoft.com/en-us/library/7wt4bf7h.aspx

      Now we transfer to the other topic regarding resizing the image in PictureBox. You can follow this article which is just talking about that.

      Resizing an Image On-The-Fly using .NET

      


    Jason Wang [MSFT]
    MSDN Community Support | Feedback to us



    Tuesday, July 23, 2013 3:16 AM
  • you can refer to the below threads to get the answer:

    http://stackoverflow.com/questions/4636684/crop-and-resize-image-to-specific-dimensions

    http://stackoverflow.com/questions/8992619/how-to-crop-and-resize-image-in-one-step-in-net


    If my post is helpful,please help to vote as helpful, if my post solve your question, please help to make it as answer. My sample

    Tuesday, July 23, 2013 6:46 AM
  • Hi,

        Thank you for your reply. Its so well explained.

    I modified the code as follow.

    i have a form in which i have two pictureboxes in one i have source image and in another i have the result picture box.

    i couldn't understand this code properly.

    I applied it as follow in the ResizePic.cs

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;
    
    namespace TroboAki.Dialogs
    {
        public partial class ResizeClassPhoto : Form
        {
            private string sourcePicLocation;
            
            public ResizeClassPhoto(string philepath)
            {
                InitializeComponent();
                sourcePicLocation = philepath;
            }
    
            private void ResizeClassPhoto_Load(object sender, EventArgs e)
            {
                this.sourcePictureBox.ImageLocation = sourcePicLocation;
            }
            Boolean bHaveMouse;
            Point ptOriginal = new Point();
            Point ptLast = new Point();
            private Image cropWidth;
            private System.Drawing.Size cropHeight;
    
            // Called when the left mouse button is pressed. 
            public void MyMouseDown(Object sender, MouseEventArgs e)
            {
                // Make a note that we "have the mouse".
                bHaveMouse = true;
                // Store the "starting point" for this rubber-band rectangle.
                ptOriginal.X = e.X;
                ptOriginal.Y = e.Y;
                // Special value lets us know that no previous
                // rectangle needs to be erased.
                ptLast.X = -1;
                ptLast.Y = -1;
            }
            // Convert and normalize the points and draw the reversible frame.
            private void MyDrawReversibleRectangle(Point p1, Point p2)
            {
                Rectangle rc = new Rectangle();
    
                // Convert the points to screen coordinates.
                p1 = PointToScreen(p1);
                p2 = PointToScreen(p2);
                // Normalize the rectangle.
                if (p1.X < p2.X)
                {
                    rc.X = p1.X;
                    rc.Width = p2.X - p1.X;
                }
                else
                {
                    rc.X = p2.X;
                    rc.Width = p1.X - p2.X;
                }
                if (p1.Y < p2.Y)
                {
                    rc.Y = p1.Y;
                    rc.Height = p2.Y - p1.Y;
                }
                else
                {
                    rc.Y = p2.Y;
                    rc.Height = p1.Y - p2.Y;
                }
                // Draw the reversible frame.
                ControlPaint.DrawReversibleFrame(rc,
                                Color.Red, FrameStyle.Dashed);
            }
            // Called when the left mouse button is released.
            public void MyMouseUp(Object sender, MouseEventArgs e)
            {
                // Set internal flag to know we no longer "have the mouse".
                bHaveMouse = false;
                // If we have drawn previously, draw again in that spot
                // to remove the lines.
                if (ptLast.X != -1)
                {
                    Point ptCurrent = new Point(e.X, e.Y);
                    MyDrawReversibleRectangle(ptOriginal, ptLast);
                }
                // Set flags to know that there is no "previous" line to reverse.
                ptLast.X = -1;
                ptLast.Y = -1;
                ptOriginal.X = -1;
                ptOriginal.Y = -1;
            }
            // Called when the mouse is moved.
            public void MyMouseMove(Object sender, MouseEventArgs e)
            {
                Point ptCurrent = new Point(e.X, e.Y);
                // If we "have the mouse", then we draw our lines.
                if (bHaveMouse)
                {
                    // If we have drawn previously, draw again in
                    // that spot to remove the lines.
                    if (ptLast.X != -1)
                    {
                        MyDrawReversibleRectangle(ptOriginal, ptLast);
                    }
                    // Update last point.
                    ptLast = ptCurrent;
                    // Draw new lines.
                    MyDrawReversibleRectangle(ptOriginal, ptCurrent);
                }
            }
            // Set up delegates for mouse events.
            protected override void OnLoad(System.EventArgs e)
            {
                MouseDown += new MouseEventHandler(MyMouseDown);
                MouseUp += new MouseEventHandler(MyMouseUp);
                MouseMove += new MouseEventHandler(MyMouseMove);
                bHaveMouse = false;
            }
            private void button1_Click(object sender, EventArgs e)
            {
    
            }
    
            private void destinationPictureBox_Click(object sender, EventArgs e)
            {
    
            }
    
            private void cropButton_Click(object sender, EventArgs e)
            {
                Bitmap croppedBitmap;
                Image sourcePic = this.sourcePictureBox.Image;
                Bitmap bit = new Bitmap(sourcePic, sourcePic.Width, sourcePic.Height);
                croppedBitmap = new Bitmap(cropWidth, cropHeight);
                Graphics g = Graphics.FromImage(croppedBitmap);
                g.DrawImage(bit, 0, 0, rect, GraphicsUnit.Pixel);
                this.destinationPictureBox.Image = croppedBitmap;
            }
    
           
           
    
        }
    }

    Thank you for your help

    Regards

    Tuesday, July 23, 2013 9:00 AM
  • Thank you and i ipmlemented but i have the following problem.

    The pic in source picture is not shown. And nothing is working.

    Please try to check my code i have posted below.

    Thanks in Advance.

    Tuesday, July 23, 2013 9:28 AM
  • Hi NK sharma,

      Welcome to MSDN Forum Support.

      Please mark as answer if you feel my reply is suitable for your needs. Meanwhile, you can repost your new post at this forum.Hope you understand us.


    Jason Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, July 30, 2013 11:07 AM
  • Thank you for your answer.

    But i didn't understand your answer well.

    I used another code.

    And still have some problem with that.

    Thank you

    Tuesday, July 30, 2013 11:36 AM