I need to load up an image and draw a draggable rectangle on it to determine the area to resize

Hi all experts.

I tried searching but dun really find what I wanted to achieve

Basically I need to

1. Load up an image into picturebox (500,500) from filedialog or directory listing 'Source image should not be resized to fit
2. Draw a rectangle of 300x300 inside the picture box
3. Drag the rectangle to determine the area that I wanted.
4. Crop the 300x300 area
5. Transfer to 300x300 picture to another picturebox and resize it to 100x100


From there I will save it into the database.

Thanks in advance!!
LVL 9
leechoonhweeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mike TomlinsonMiddle School Assistant TeacherCommented:
I assume this is WinForms?...what version VB.Net are you working in?
0
Mike TomlinsonMiddle School Assistant TeacherCommented:
*Assuming WinForms and VB.Net 2005 (or above)...

Try this out:
Public Class Form1

    Private StartPT As Point
    Private CropRC As Rectangle
    Private CropSize As New Size(300, 300)
    Private DestinationSize As New Size(100, 100)

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        CropRC = New Rectangle(New Point(PictureBox1.Width / 2 - CropSize.Width / 2, PictureBox1.Height / 2 - CropSize.Height / 2), CropSize)
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Using ofd As New OpenFileDialog
            ofd.Title = "Select an Image"
            ofd.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*"
            If ofd.ShowDialog = Windows.Forms.DialogResult.OK Then
                Try
                    ' this technique opens the image without locking the file:
                    Using fs As New System.IO.FileStream(ofd.FileName, IO.FileMode.Open)
                        PictureBox1.Image = Image.FromStream(fs)
                    End Using
                Catch ex As Exception
                    MessageBox.Show("File: " & ofd.FileName & vbCrLf & vbCrLf & ex.ToString, "Error Opening Image", MessageBoxButtons.OK, MessageBoxIcon.Error)
                End Try
            End If
        End Using
    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        If Not IsNothing(PictureBox1.Image) Then
            Dim bmp As New Bitmap(DestinationSize.Width, DestinationSize.Height)
            Using G As Graphics = Graphics.FromImage(bmp)
                Dim destPTs() As Point = {New Point(0, 0), New Point(DestinationSize.Width, 0), New Point(0, DestinationSize.Height)}
                G.DrawImage(PictureBox1.Image, destPTs, CropRC, GraphicsUnit.Pixel)
            End Using
            PictureBox2.Image = bmp
        End If
    End Sub

    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        Using dashes As New Pen(Color.Red)
            dashes.DashStyle = Drawing2D.DashStyle.Dash
            e.Graphics.DrawRectangle(dashes, CropRC)
        End Using
    End Sub

    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        If e.Button = Windows.Forms.MouseButtons.Left Then
            StartPT = New Point(e.X, e.Y)
            Cursor.Clip = PictureBox1.RectangleToScreen(PictureBox1.ClientRectangle)
        End If
    End Sub

    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        If e.Button = Windows.Forms.MouseButtons.None Then
            PictureBox1.Cursor = IIf(CropRC.Contains(e.X, e.Y), Cursors.SizeAll, Cursors.Default)
        ElseIf e.Button = Windows.Forms.MouseButtons.Left AndAlso PictureBox1.Cursor = Cursors.SizeAll Then
            CropRC.Offset(e.X - StartPT.X, e.Y - StartPT.Y)
            If CropRC.Location.X < 0 Then
                CropRC.Location = New Point(0, CropRC.Location.Y)
            End If
            If CropRC.Location.Y < 0 Then
                CropRC.Location = New Point(CropRC.Location.X, 0)
            End If
            If CropRC.Right > PictureBox1.ClientRectangle.Right - 1 Then
                CropRC.Location = New Point(PictureBox1.ClientRectangle.Width - CropSize.Width - 1, CropRC.Location.Y)
            End If
            If CropRC.Bottom > PictureBox1.ClientRectangle.Bottom - 1 Then
                CropRC.Location = New Point(CropRC.Location.X, PictureBox1.ClientRectangle.Height - CropSize.Height - 1)
            End If
            StartPT = New Point(e.X, e.Y)
            PictureBox1.Refresh()
        End If
    End Sub

    Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
        Cursor.Clip = Nothing
    End Sub

End Class

Open in new window

FixedCropExample.jpg
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leechoonhweeAuthor Commented:
Wow...Genius!!!!

Hmmm... I can load up the picture but that red rectangle is not showing in the picturebox1... I am using VS2010 and winform....

My bad, I noticed that if the picture is too big, I cant really crop it to 300x300. In that case can I do a resize of the source picture to 500x500 into picturebox1?

Sorry for the trouble
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Mike TomlinsonMiddle School Assistant TeacherCommented:
The red rectangle is being drawn here:

    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        Using dashes As New Pen(Color.Red)
            dashes.DashStyle = Drawing2D.DashStyle.Dash
            e.Graphics.DrawRectangle(dashes, CropRC)
        End Using
    End Sub

Make sure you haven't somehow lost the "Handles PictureBox1.Paint" part on the end of the first line.

Can you explain more how you want to handle large images?
...are your source images always "square"?
...if they are bigger than 500x500 then you want them shrunk down to 500x500 BEFORE being displayed in PictureBox1?
...an alternative is to allow SCROLLING in PictureBox1...
0
leechoonhweeAuthor Commented:
I copied everything from the code above so I dun think I have missed that out :)

I wun know what would be the source file size is like cuz I was testing it with a relative large file and I noticed that problem. So I was thinking since the end results is a 300x300 and 100x100 thumbnail, wouldn it be better if I can straightaway resize it to 500x500?

Oh, the button2 (I assume is crop) is not transferring to the picturebox2 as well although the trace went well...

Even doing a picturebox1.refresh does not show the red rectangle.
0
Mike TomlinsonMiddle School Assistant TeacherCommented:
I wrote it in VS2010 as well...not sure where the difference is...

We can certainly crop to 500x500 beforehand but I would like to solve the other problem first.

Make sure the controls are all named the same.  I have PictureBox1, PictureBox2, Button1, Button2

Also make sure the SizeMode of both PictureBoxes is set to "Normal".

If that doesn't fix it then post the code from YOUR form and maybe we'll be able to spot the difference...    ?
0
leechoonhweeAuthor Commented:
I was thinking of doing something like this.


sample.jpg
0
leechoonhweeAuthor Commented:
my code


Public Class Form1

    Private StartPT As Point
    Private CropRC As Rectangle
    Private CropSize As New Size(300, 300)
    Private DestinationSize As New Size(100, 100)

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
        CropRC = New Rectangle(New Point(PictureBox1.Width / 2 - CropSize.Width / 2, PictureBox1.Height / 2 - CropSize.Height / 2), CropSize)
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Using ofd As New OpenFileDialog
            ofd.Title = "Select an Image"
            ofd.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*"
            If ofd.ShowDialog = Windows.Forms.DialogResult.OK Then
                Try
                    ' this technique opens the image without locking the file:
                    Using fs As New System.IO.FileStream(ofd.FileName, IO.FileMode.Open)
                        PictureBox1.Image = Image.FromStream(fs)

                    End Using
                Catch ex As Exception
                    MessageBox.Show("File: " & ofd.FileName & vbCrLf & vbCrLf & ex.ToString, "Error Opening Image", MessageBoxButtons.OK, MessageBoxIcon.Error)
                End Try
            End If
        End Using
    End Sub

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        If Not IsNothing(PictureBox1.Image) Then
            Dim bmp As New Bitmap(DestinationSize.Width, DestinationSize.Height)
            Using G As Graphics = Graphics.FromImage(bmp)
                Dim destPTs() As Point = {New Point(0, 0), New Point(DestinationSize.Width, 0), New Point(0, DestinationSize.Height)}
                G.DrawImage(PictureBox1.Image, destPTs, CropRC, GraphicsUnit.Pixel)
            End Using
            PictureBox2.Image = bmp
        End If
    End Sub

    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint

        Using dashes As New Pen(Color.Red)
            dashes.DashStyle = Drawing2D.DashStyle.Dash
            e.Graphics.DrawRectangle(dashes, CropRC)
        End Using
    End Sub

    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        If e.Button = Windows.Forms.MouseButtons.Left Then
            StartPT = New Point(e.X, e.Y)
            Cursor.Clip = PictureBox1.RectangleToScreen(PictureBox1.ClientRectangle)
        End If
    End Sub

    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        If e.Button = Windows.Forms.MouseButtons.None Then
            PictureBox1.Cursor = IIf(CropRC.Contains(e.X, e.Y), Cursors.SizeAll, Cursors.Default)
        ElseIf e.Button = Windows.Forms.MouseButtons.Left AndAlso PictureBox1.Cursor = Cursors.SizeAll Then
            CropRC.Offset(e.X - StartPT.X, e.Y - StartPT.Y)
            If CropRC.Location.X < 0 Then
                CropRC.Location = New Point(0, CropRC.Location.Y)
            End If
            If CropRC.Location.Y < 0 Then
                CropRC.Location = New Point(CropRC.Location.X, 0)
            End If
            If CropRC.Right > PictureBox1.ClientRectangle.Right - 1 Then
                CropRC.Location = New Point(PictureBox1.ClientRectangle.Width - CropSize.Width - 1, CropRC.Location.Y)
            End If
            If CropRC.Bottom > PictureBox1.ClientRectangle.Bottom - 1 Then
                CropRC.Location = New Point(CropRC.Location.X, PictureBox1.ClientRectangle.Height - CropSize.Height - 1)
            End If
            StartPT = New Point(e.X, e.Y)
            PictureBox1.Refresh()
        End If
    End Sub

    Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
        Cursor.Clip = Nothing
    End Sub

End Class

Open in new window

0
leechoonhweeAuthor Commented:
Alright man!!!!  I recopied the code and it works now!!!
0
leechoonhweeAuthor Commented:
Genius!!!
0
Mike TomlinsonMiddle School Assistant TeacherCommented:
Glad you got it working!...  =)
0
leechoonhweeAuthor Commented:
Oppps btw how do I dynamically resize the image in picturebox1 if it is too big? Lets say I put a textbox and input a value of 10 which stands for 10% downsize?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.