photo editing in vb.net

[kazekagerandy]

i am doing a makeup and hairstyle makeover application in vb.net and i dont know if i can directly edit a photo in a picture box, the features of the project will be:

1. make-up features are a must.
2. it should save the original photo uploaded and the edited one.

i am thinking if i can just have labels for the make-up features but the question is will it be saved along with the original photo on the picturebox? OMG, so confusing...

can someone help me out with this? it will be greatly appreciated. thanks. :)

[jlego]

do you mean real time editing of photos inside of your vb application? like a photoshop but with your pre-defined stuff?

[kazekagerandy]

yes :)

[jlego]

http://planetsourcecode.com/vb/scripts/ShowCode.asp?txtCodeId=8051&lngWId=10

that is a link to an example which combines two images into one.
i know this isnt the ideal solution for what you want to do, but it might give you an idea.

i would imagin this pretty difficult, and beyond my capabilities.

good luck!

[kazekagerandy]

thanks for the link jlego, but do you have any other ideas that i can do to edit an image using vb? i know this is rather difficult, an alternative style will definitely help.

[jlego]

no not really. try pscode.com , search for what you are interested in. i have never done anything like that before..

[kazekagerandy]

i need a photoshop-like application if possible, where i can use brushes for the make-up and drag and drop functionality or just a click for the hairstyle and make it resizable too, in case the face of the customer uploaded photo doesnt fit with the default size of the hair; and when the editing is done, i can save the edited image in a folder.

[jlego]

try to post this question on stackoverflow.com

someone might be able to help out quicker there. i really dont man

[kazekagerandy]

thanks jlego for your efforts, but maybe there are some more readers that can read this may have better ideas,

i appreaciate it jlego :)

[jlego]

i didnt mean give up on daniweb sorry if u took it like that, was just suggesting maybe posting the question on a few different forums.

hope it works out for you

[codeorder]

See if this helps to draw on a PictureBox image and save the edited image.
1 PictureBox, 2 Buttons, 1 ComboBox

Public Class Form1
    Private myOriginalImage As String = "C:\test.png" '// Original Image File.
    Private myEditedImage As String = "C:\test_EDITED.png" '// Image File to Save the Edited Image.
    Private myGraphics As Graphics '// to draw graphics.
    Private myPen As Pen '// Pen to draw with.
    Private myPenColor As Color = Color.LawnGreen '// Pen Color to use.
    Private myPenSize As Integer = 0 '// Pen Size.
    Private allowDrawOnImage As Boolean = False '// Toggle Drawing on Image.
    Private imageToDrawOn As Image '// used to Draw on, then set back as the PictureBox.Image.

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        PictureBox1.Image = Image.FromFile(myOriginalImage) '// Load image in PictureBox.
        For i As Integer = 2 To 100 Step 2 : ComboBox1.Items.Add(i) : Next '// Pen Sizes to the ComboBox.
        ComboBox1.DropDownStyle = ComboBoxStyle.DropDownList '// Disable user from typing in ComboBox.
        ComboBox1.SelectedIndex = 5 '// auto select Pen Size.
        Button1.Text = "Select Color" : Button2.Text = "Save Image"
    End Sub
    '// Select a Color to draw with.
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim myColorDialog As New ColorDialog
        If myColorDialog.ShowDialog = DialogResult.OK Then myPenColor = myColorDialog.Color
    End Sub
    '// Save Image.
    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        PictureBox1.Image.Save(myEditedImage)
        MsgBox("Edited Image Saved.", MsgBoxStyle.Information)
    End Sub
    '// Select Pen Size.
    Private Sub ComboBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox1.SelectedIndexChanged
        myPenSize = CInt(ComboBox1.SelectedItem)
    End Sub

#Region "--------------- DRAW ON PICTUREBOX1 --------------------------"
    '// draw in location when clicking a certain spot.
    Private Sub PictureBox1_MouseClick(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseClick
        PictureBox1_MouseMove(sender, e) '// call the Event to have it draw in the coordinates of the Cursor's location.
    End Sub
    '// Start access to Draw.
    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        allowDrawOnImage = True
    End Sub
    '// Stop access to Draw.
    Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
        allowDrawOnImage = False
    End Sub
    '// Begin Drawing.
    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        drawOnImage(e.X, e.Y) '// send the Cursor coordinates (e.X, e.Y) of the picturebox.
    End Sub
    '// Draw.
    Private Sub drawOnImage(ByVal xLocation As Integer, ByVal yLocation As Integer)
        If allowDrawOnImage = True Then
            myGraphics = PictureBox1.CreateGraphics
            myPen = New Pen(myPenColor, myPenSize) '// set pen color and width.
            xLocation = CInt(xLocation - (myPenSize / 2)) : yLocation = CInt(yLocation - (myPenSize / 2)) '// center pen to cursor.
            '// following code with "valuable" information boosted from here, just modified for this project.
            '//-- http://www.dreamincode.net/forums/topic/130609-save-picturebox-with-graphics-drawn-on-it/page__view__findpost__p__792144
            imageToDrawOn = PictureBox1.Image '// get Image.
            myGraphics = Graphics.FromImage(imageToDrawOn) '// Draw on Image.
            myGraphics.DrawEllipse(myPen, xLocation, yLocation, myPenSize, myPenSize) '// (preset pen, location.X, location.Y, width, height)
            PictureBox1.Image = imageToDrawOn '// set Image back.
        End If
    End Sub
#End Region
End Class

[Unhnd_Exception]

This should get you started.

Add a small picture box and a big picture box to the form.

Set the forms allowdrop property to true.

Set the small pictureboxes image.

No error checking is performed so make sure you set the image.

You can drag the small picture box image into the big picture box and move it, resize it to the left and resize all at the top left corner.

Public Class Form1
    Private ActiveHairStyle As HairStyle
    Private MouseIsDown As Boolean
    Private CurrentAction As Action

    Public Enum Action
        None
        Move
        ResizeNW
        ResizeSW
        ResizeLeft
    End Enum

    Public Class HairStyle
        Public Pic As Bitmap
        Public bBox As Rectangle
        Public referencePoint As Point
    End Class

    Private Sub picHair_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles picHair.MouseDown
        'Start the drag drop operation with the new hairstyle object
        Dim thisStyle As New HairStyle
        thisStyle.Pic = CType(CType(sender, PictureBox).Image, Bitmap)

        DoDragDrop(thisStyle, DragDropEffects.All)

    End Sub

    Private Sub Form1_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragEnter
        'If this is a Hairstyle then allow the drop
        If e.Data.GetDataPresent(GetType(HairStyle)) Then
            e.Effect = DragDropEffects.All
        End If
    End Sub

    Private Sub Form1_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragDrop

        If e.Data.GetDataPresent(GetType(HairStyle)) Then
            'Set the active hair style as the one being dropped and drop it 
            'at the cursor location
            ActiveHairStyle = CType(e.Data.GetData(GetType(HairStyle)), HairStyle)
            ActiveHairStyle.bBox = New Rectangle(picMain.PointToClient(Cursor.Position), ActiveHairStyle.Pic.Size)
            picMain.Invalidate()
        End If
    End Sub

    Private Sub picMain_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles picMain.MouseDown

        If ActiveHairStyle IsNot Nothing Then
            CurrentAction = GetAction(ActiveHairStyle.bBox, e.Location)
            If CurrentAction <> Action.None Then
                MouseIsDown = True
                ActiveHairStyle.referencePoint = e.Location
            End If
        End If
      
    End Sub

    Private Sub picMain_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles picMain.MouseMove

        If ActiveHairStyle IsNot Nothing Then

            If MouseIsDown Then
              
                Select Case CurrentAction
                    Case Action.Move
                        'move the hairstyle to its new location
                        ActiveHairStyle.bBox.Location = ActiveHairStyle.bBox.Location + (CType(e.Location, Size) - CType(ActiveHairStyle.referencePoint, Size))
                        ActiveHairStyle.referencePoint = e.Location

                    Case Action.ResizeLeft
                        'move the hair style over to the left and increase its
                        'width by how much it moved
                        ActiveHairStyle.bBox.X = e.Location.X
                        ActiveHairStyle.bBox.Width += ActiveHairStyle.referencePoint.X - e.Location.X
                        ActiveHairStyle.referencePoint = e.Location

                    Case Action.ResizeNW
                        ActiveHairStyle.bBox.Location = e.Location
                        ActiveHairStyle.bBox.Width += ActiveHairStyle.referencePoint.X - e.Location.X
                        ActiveHairStyle.bBox.Height += ActiveHairStyle.referencePoint.Y - e.Location.Y
                        ActiveHairStyle.referencePoint = e.Location

                End Select

                picMain.Invalidate()

            Else
                'Do a hit test and change the cursor.
                Select Case GetAction(ActiveHairStyle.bBox, e.Location)
                    Case Action.None
                        picMain.Cursor = Cursors.Arrow

                    Case Action.Move
                        picMain.Cursor = Cursors.Hand

                    Case Action.ResizeLeft
                        picMain.Cursor = Cursors.SizeWE

                    Case Action.ResizeNW
                        picMain.Cursor = Cursors.SizeNWSE

                    Case Action.ResizeSW
                        picMain.Cursor = Cursors.SizeNESW

                End Select


            End If

        End If

    End Sub

    Private Sub picMain_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles picMain.MouseUp
        'reset the mouse is down
        MouseIsDown = False
    End Sub

    Private Sub picMain_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles picMain.Paint
        'Draw the hair style to the current size which the bBox provides.
        If ActiveHairStyle IsNot Nothing Then
            e.Graphics.DrawImage(ActiveHairStyle.Pic, ActiveHairStyle.bBox)

            'Draw a dotted line around the hairstyle
            Dim dotPen As New Pen(Color.Black, 1)
            dotPen.DashStyle = Drawing2D.DashStyle.Dot
            e.Graphics.DrawRectangle(dotPen, ActiveHairStyle.bBox)
            dotPen.Dispose()
        End If
    End Sub

    Private Function GetAction(ByVal hairBox As Rectangle, ByVal ScreenLocation As Point) As Action
        'Perform some hit testing.

        'Stretch the box to add a little buffer
        hairBox.Inflate(4, 4)

        'Check if we're inside the hairbox
        If hairBox.Contains(ScreenLocation) Then

            'Checks if mouse if over the left side
            If ScreenLocation.X <= ActiveHairStyle.bBox.Left + 4 Then
                'the cursor is over the left side 

                If ScreenLocation.Y <= ActiveHairStyle.bBox.Top + 4 Then
                    'the cursor is over the top left corner
                    Return Action.ResizeNW

                ElseIf ScreenLocation.Y >= ActiveHairStyle.bBox.Bottom - 4 Then
                    'the cursor is over the bottom left corner
                    Return Action.ResizeSW

                Else
                    'the cursor is over the left side
                    Return Action.ResizeLeft
                End If

            Else
                'the location is in the box.  Check the other sides.
                Return Action.Move
            End If

        Else
            'Not in the box
            Return Action.None
        End If

    End Function

End Class

[jlego]

@unhnd_exception

i apologize if you took that personally. a few posts down i told him i did not mean to abandon dani-web. i know that we where talking for awhile, and whenever i post something that i need to figure out rather quickly (not sure his time frame) if i post it on stackoverflow between there and dani-web i come up with rather quickly.

i in no way ment to call you a bad programmer, or even say you where not a good programmer.

[kazekagerandy]

thanks Unhnd_Exception! thats brilliant, but how can i do it with many pictureboxes to put on the big picbox? i mean, i have more than 1 hairstyle and it needs more than 1 picbox to show choices, how can i integrate those multiple pictureboxes to make them all be on the big picturebox? thanks so much :)

[kazekagerandy]

and by the way, how can i save the image with the new hairstyle on along with the main pic?

[Unhnd_Exception]

You can add multiple images by adding them to a list.

Public Class Form1
    Private HairStyles As New List(Of HairStyle) 'List
    Private ActiveHairStyle As HairStyle
    Private MouseIsDown As Boolean
    Private CurrentAction As Action

Attach the small picture boxes handler to all hair style picture boxes.

Check for duplicate hair styles in the drag enter event. You could add an ID field to the hair style class if duplicate hair styles are not desired. It could be checked in the drag enter sub. Before allowing the drop effect check the id.

Private Sub Form1_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragEnter
        'If this is a Hairstyle then allow the drop
        If e.Data.GetDataPresent(GetType(HairStyle)) Then
            'Check Id's before allowing the effect
            e.Effect = DragDropEffects.All
        End If
    End Sub

Add the items to the list on the drop

Private Sub Form1_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragDrop

        If e.Data.GetDataPresent(GetType(HairStyle)) Then
            'Set the active hair style as the one being dropped and drop it 
            'at the cursor location

            'Add to the hair styles list
            HairStyles.Add(CType(e.Data.GetData(GetType(HairStyle)), HairStyle))
            ActiveHairStyle = HairStyles(HairStyles.Count - 1)
            ActiveHairStyle.bBox = New Rectangle(picMain.PointToClient(Cursor.Position), ActiveHairStyle.Pic.Size)


            picMain.Invalidate()
        End If
    End Sub

In the mouse down event call a sub to check which hairstyle is selected.

Private Sub picMain_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles picMain.MouseDown

        ActiveHairStyle = GetHairStyle(e.Location)

        If ActiveHairStyle IsNot Nothing Then

            CurrentAction = GetAction(ActiveHairStyle.bBox, e.Location)
            If CurrentAction <> Action.None Then
                MouseIsDown = True

                'set the cursor to a hand if its an arrow
                If picMain.Cursor = Cursors.Arrow Then picMain.Cursor = Cursors.Hand
                ActiveHairStyle.referencePoint = e.Location
            End If
        End If

        picMain.Invalidate()
    End Sub

 Private Function GetHairStyle(ByVal screenLocation As Point)
        'Check each hair style in reverse order.  The first hair style in 
        'List is the bottom hair style
        Dim hairBox As Rectangle
        For i = HairStyles.Count - 1 To 0 Step -1
            hairBox = HairStyles(i).bBox
            hairBox.Inflate(4, 4)
            If hairBox.Contains(screenLocation) Then
                Return HairStyles(i)
            End If
        Next
        Return Nothing
    End Function

In the paint event draw all the hairstyles

Private Sub picMain_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles picMain.Paint
        
        'Draw all the hair styles but skip the active one and draw it like before
        For i = 0 To HairStyles.Count - 1
            If ActiveHairStyle IsNot Nothing AndAlso ActiveHairStyle.Equals(HairStyles(i)) Then
                Continue For
            End If
            e.Graphics.DrawImage(HairStyles(i).Pic, HairStyles(i).bBox)
        Next

        If ActiveHairStyle IsNot Nothing Then
            e.Graphics.DrawImage(ActiveHairStyle.Pic, ActiveHairStyle.bBox)

            'Draw a dotted line around the hairstyle
            Dim dotPen As New Pen(Color.Black, 1)
            dotPen.DashStyle = Drawing2D.DashStyle.Dot
            e.Graphics.DrawRectangle(dotPen, ActiveHairStyle.bBox)
            dotPen.Dispose()
        End If
    End Sub

When ready to save combine all the images.

Private Function GetFinalImage() As Bitmap

        Dim finalImage As Bitmap = picMain.Image.Clone

        Dim g As Graphics = Graphics.FromImage(finalImage)

        g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic

        For i = 0 To HairStyles.Count - 1
            g.DrawImage(HairStyles(i).Pic, HairStyles(i).bBox)
        Next

        g.Dispose()
        
        'the final image now contains the original and all the styles
        Return finalImage

    End Function

[kazekagerandy]

oh thanks unhand exception, but here is a last question from me, can i possibly make a face recognizing software in vb where when i upload the image, it already knows where the eyes, nose, lips, cheeks and so on will be? its for the make-up function and for the hair as well.. thanks :)

[kazekagerandy]

uhhm, there seems to be a problem with your code unhnd_exception, when i copied your code, HairStyle is not declared, what should i do about it? is it a listview or collection of picboxes? and the picMain is supposed to be a picbox isnt it?

[Unhnd_Exception]

Theres no problem.

Use the original post code.

The second post code are the code blocks that would need to be change from the original to have multiple images.

Good luck on the Face Recognition part of it.

[kazekagerandy]

sorry for the late reply, so you mean i will just replace the codes youve given earlier with these you just gave? thanks

[kazekagerandy]

please kindly give me the complete code of multiple hairstyles, because im getting confused of replacing the old codes with your new codes. thanks :)