Solved

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

Posted on 2010-09-21
12
415 Views
Last Modified: 2012-05-10
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!!
0
Comment
Question by:leechoonhwee
  • 7
  • 5
12 Comments
 
LVL 85

Expert Comment

by:Mike Tomlinson
ID: 33726105
I assume this is WinForms?...what version VB.Net are you working in?
0
 
LVL 85

Accepted Solution

by:
Mike Tomlinson earned 500 total points
ID: 33726760
*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
 
LVL 9

Author Comment

by:leechoonhwee
ID: 33727075
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
 
LVL 85

Expert Comment

by:Mike Tomlinson
ID: 33727126
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
 
LVL 9

Author Comment

by:leechoonhwee
ID: 33727173
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
 
LVL 85

Expert Comment

by:Mike Tomlinson
ID: 33727271
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 9

Author Comment

by:leechoonhwee
ID: 33727305
I was thinking of doing something like this.


sample.jpg
0
 
LVL 9

Author Comment

by:leechoonhwee
ID: 33727315
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
 
LVL 9

Author Comment

by:leechoonhwee
ID: 33727334
Alright man!!!!  I recopied the code and it works now!!!
0
 
LVL 9

Author Closing Comment

by:leechoonhwee
ID: 33727376
Genius!!!
0
 
LVL 85

Expert Comment

by:Mike Tomlinson
ID: 33727394
Glad you got it working!...  =)
0
 
LVL 9

Author Comment

by:leechoonhwee
ID: 33727593
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem with Filesystemobject or .NET version 3 35
Help with Syntax 9 27
Help with AsEnumerable(), LINQ 4 22
Get size of each directory on each mapped drive 5 22
Welcome my friends to the second instalment and follow-up to our Minify and Concatenate Your Scripts and Stylesheets (http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/A_4334-Minify-and-Concatenate-Your-Scripts-and-Stylesheets.html)…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now