Save Drawn Images Picturebox

Article
2013-09-01

Question

_{Sunday, September 1, 2013 8:57 AM}

Hello!

Im trying out to make random aplications but now i trying to make a painting program. I have made the function that you can paint as you see here

Here's my code:

    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        If Down = True Then
            If Eser = "true" Then
                PictureBox1.CreateGraphics.FillEllipse(Brushes.White, e.X, e.Y, TrackBar1.Value, TrackBar1.Value)
                Cursor = Cursors.Arrow
            Else
                Dim b As Brush = New Pen(SelectedColor).Brush
                PictureBox1.CreateGraphics.FillEllipse(b, e.X, e.Y, TrackBar1.Value, TrackBar1.Value)
            End If

        End If
    End Sub

    Private Sub PictureBox1_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        Down = True
    End Sub

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

As you see at the image, i using a trackbar to change the size of the brush.

Sorry if you not understand the buttons text at the image above. Im from sweden and its swedish words. And, sorry for the bad painting of a car xD. Anyway. How can i save this image? I mean the car image, to a file. And gladly if i could save in many formats like PNG, BMP JPEG etc. Thanks for answers!

All replies (12)

_{Sunday, September 1, 2013 11:54 AM ✅Answered | 1 vote}

This will give you an invisible "eraser" currently set to a 21 X 21 pixel square around the mouse point. All it's doing is setting all the pixels in that square around the mouse pointer to white, which is the PictureBox images original color, as the mouse is moved. Obviously a mouse up and down event would be good in order to start and stop the eraser.

You can see where I "erased" through the blue lines below.

Option Strict On

Public Class Form1

    Dim DrawOrErase As Integer = 0

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.CenterToScreen()
        Dim Bmp As New Bitmap(PictureBox1.Width, PictureBox1.Height)
        For x = 0 To PictureBox1.Width - 1
            For y = 0 To PictureBox1.Height - 1
                Bmp.SetPixel(x, y, Color.White)
            Next
        Next
        PictureBox1.Image = Bmp
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        PictureBox1.Image.Save("C:\Users\John\Desktop\Test\Test1.Bmp", System.Drawing.Imaging.ImageFormat.Bmp)
    End Sub

    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        If DrawOrErase = 0 Then
            DrawOrErase = 1
            Button2.Text = "Erasing"
        Else
            DrawOrErase = 0
            Button2.Text = "Drawing"
        End If
    End Sub


    Private Sub PictureBox1_MouseMove(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseMove
        If DrawOrErase = 0 Then
            Dim ImageToDrawOn As Image
            Dim g As Graphics
            Dim Brush4 As New SolidBrush(Color.Aqua)
            g = PictureBox1.CreateGraphics()
            ImageToDrawOn = PictureBox1.Image
            g = Graphics.FromImage(ImageToDrawOn)
            g.FillEllipse(Brush4, e.X, e.Y, 10, 10)
            PictureBox1.Image = ImageToDrawOn
            g.Dispose()
            Brush4.Dispose()
        ElseIf DrawOrErase = 1 Then
            Try
                Dim EraserSize As Integer = 10 ' = 21 X 21 square invisible pixel eraser extending around mouse point
                Dim Xareas As New List(Of Integer)
                Dim Yareas As New List(Of Integer)
                For X = e.X - EraserSize To e.X + EraserSize
                    Xareas.Add(X)
                Next
                For Y = e.Y - EraserSize To e.Y + EraserSize
                    Yareas.Add(Y)
                Next
                Dim Counter1 As Integer = 0
                Dim Counter2 As Integer = 0
                Dim Eraser As Bitmap = CType(PictureBox1.Image, Bitmap)
                Do Until Counter2 = Yareas.Count - 1
                    If Counter1 = Xareas.Count Then Counter1 = 0
                    If Counter1 = Xareas.Count - 1 Then Counter2 += 1
                    Eraser.SetPixel(Xareas(Counter1), Yareas(Counter2), Color.FromArgb(0, 0, 0, 0))
                    Counter1 += 1
                Loop
                PictureBox1.Image = Eraser
            Catch ex As Exception ' In case attempts to set pixel outside of images area.
            End Try
        End If
    End Sub

End Class

Please BEWARE that I have NO EXPERIENCE and NO EXPERTISE and probably onset of DEMENTIA which may affect my answers! Also, I've been told by an expert, that when you post an image it clutters up the thread and mysteriously, over time, the link to the image will somehow become "unstable" or something to that effect. :) I can only surmise that is due to Global Warming of the threads.

_{Sunday, September 1, 2013 9:07 AM}

Image Save method

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

The image is a property of your picturebox

http://msdn.microsoft.com/en-us/library/system.windows.forms.picturebox.image.aspx

Success
Cor

_{Sunday, September 1, 2013 9:44 AM}

When you use CreateGraphics to draw, the drawing only exists on the display. Nothing persists to save. If you want to save what you draw, you have to draw to an image or draw in the Paint event of a Control. See www.bobpowell.net for code.

_{Sunday, September 1, 2013 9:48 AM}

I have now set the image property. But when i save the image its only getting blank. What did i wrong. Its one thing i dont understand. I getting an error here:

Private Sub Button5_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles Button5.Click
    Try 
        If (image1 IsNot Nothing) Then
            image1.Save("c:\myBitmap.bmp")
            Button5.Text = "Saved file." 
        End If 
    Catch ex As Exception
        MessageBox.Show("There was a problem saving the file." _
        & "Check the file permissions.")
    End Try 

End Sub

at the image1 and image1.save.

I tried to replace it with Picturebox1.image.save but that gave me a blank image

_{Sunday, September 1, 2013 10:09 AM}

For some reason only the .Png image comes out with a white background.

Images are in order from .Bmp to .Png. Also I believe you could put the Image code in your mouse move event. Then the PictureBoxs image would continually be updated with new information as you drew on it. Also there's probably a way to set the original bitmap for the PictureBox's Image to all white during form load.

Option Strict On

Public Class Form1

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.CenterToScreen()
        NumericUpDown1.Minimum = 1
        NumericUpDown1.Maximum = 4
        NumericUpDown1.Increment = 1
        NumericUpDown1.Value = 1
        PictureBox1.Image = New Bitmap(PictureBox1.Width, PictureBox1.Height)
    End Sub

    Private Sub NumericUpDown1_ValueChanged(sender As Object, e As EventArgs) Handles NumericUpDown1.ValueChanged
        Select Case NumericUpDown1.Value
            Case 1
                Label1.Text = "Image format will be .Bmp"
            Case 2
                Label1.Text = "Image format will be .Gif"
            Case 3
                Label1.Text = "Image format will be .Jpeg"
            Case 4
                Label1.Text = "Image format will be .Png"
        End Select
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Select Case NumericUpDown1.Value
            Case 1
                PictureBox1.Image.Save("C:\Users\John\Desktop\Test\Test1.Bmp", System.Drawing.Imaging.ImageFormat.Bmp)
            Case 2
                PictureBox1.Image.Save("C:\Users\John\Desktop\Test\Test2.Gif", System.Drawing.Imaging.ImageFormat.Gif)
            Case 3
                PictureBox1.Image.Save("C:\Users\John\Desktop\Test\Test3.Jpg", System.Drawing.Imaging.ImageFormat.Jpeg)
            Case 4
                PictureBox1.Image.Save("C:\Users\John\Desktop\Test\Test4.Png", System.Drawing.Imaging.ImageFormat.Png)
        End Select
    End Sub

    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
        PaintImageToPictureBox()
    End Sub

    Private Sub PaintImageToPictureBox()
        Dim ImageToDrawOn As Image
        Dim g As Graphics
        Dim Pen1 As New Pen(Brushes.Aqua, 20)
        g = PictureBox1.CreateGraphics()
        ImageToDrawOn = PictureBox1.Image
        g = Graphics.FromImage(ImageToDrawOn)
        g.DrawLine(Pen1, 40, 40, 300, 300)
        PictureBox1.Image = ImageToDrawOn
        g.Dispose()
        Pen1.Dispose()
    End Sub

End Class

_{Sunday, September 1, 2013 10:19 AM}

the paintpicturebox is painting a line. And it can save it. But i still dont get it. But how do i get my drawing to work so it can be saved as your line does?

_{Sunday, September 1, 2013 10:36 AM}

the paintpicturebox is painting a line. And it can save it. But i still dont get it. But how do i get my drawing to work so it can be saved as your line does?

I suppose you put this code, but instead replace the line drawing code with your draw elipse code, in your mouse move event. And load the PictureBox image with a Bitmap or a white image that you previously created from paint or something on Form Load.

You can't paint on the PictureBox and save it (well maybe you can but I don't know how) you have to paint to a graphics object and save that to an image. In this instance the image is the PictureBoxs image.

And as you move your mouse the PictureBoxs image gets updated for every graphics object paint event your program performs.

Dim ImageToDrawOn As Image
Dim g As Graphics
Dim Pen1 As New Pen(Brushes.Aqua, 20)
g = PictureBox1.CreateGraphics()
ImageToDrawOn = PictureBox1.Image
g = Graphics.FromImage(ImageToDrawOn)
g.DrawLine(Pen1, 40, 40, 300, 300)
PictureBox1.Image = ImageToDrawOn
g.Dispose()
Pen1.Dispose()

_{Sunday, September 1, 2013 10:45 AM}

Dim ImageToDrawOn As Image
Dim g As Graphics
Dim Brush4 As New SolidBrush(Color.Aqua)
g = PictureBox1.CreateGraphics()
ImageToDrawOn = PictureBox1.Image
g = Graphics.FromImage(ImageToDrawOn)
g.FillEllipse(Brush4, e.X, e.Y, 5, 5)
PictureBox1.Image = ImageToDrawOn
g.Dispose()
Brush4.Dispose()

Put the above code in your Mouse Move event.

_{Sunday, September 1, 2013 11:38 AM}

This Code in Form load will set your Bitmap that PictureBox1 uses for its image to all white on Form load.

Option Strict On

Public Class Form1

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.CenterToScreen()
        Dim Bmp As New Bitmap(PictureBox1.Width, PictureBox1.Height)
        For x = 0 To PictureBox1.Width - 1
            For y = 0 To PictureBox1.Height - 1
                Bmp.SetPixel(x, y, Color.White)
            Next
        Next
        PictureBox1.Image = Bmp
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        PictureBox1.Image.Save("C:\Users\John\Desktop\Test\Test1.Bmp", System.Drawing.Imaging.ImageFormat.Bmp)
    End Sub

    Private Sub PictureBox1_MouseMove(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseMove
        Dim ImageToDrawOn As Image
        Dim g As Graphics
        Dim Brush4 As New SolidBrush(Color.Aqua)
        g = PictureBox1.CreateGraphics()
        ImageToDrawOn = PictureBox1.Image
        g = Graphics.FromImage(ImageToDrawOn)
        g.FillEllipse(Brush4, e.X, e.Y, 5, 5)
        PictureBox1.Image = ImageToDrawOn
        g.Dispose()
        Brush4.Dispose()
    End Sub
End Class

_{Sunday, September 1, 2013 12:48 PM}

The code worked! :D

But how do i get white background instead of black? Or better, that the user can select color off the background. :)

_{Sunday, September 1, 2013 1:08 PM}

Oh.. I tried to save the image in png. And then the background got white! :D

Thanks for all answers on this thread!

_{Sunday, September 1, 2013 8:24 PM}

Oh.. I tried to save the image in png. And then the background got white! :D

Thanks for all answers on this thread!

This code sets the Bitmap to all white pixels in the form load event so you shouldn't have an image with a black background no matter what format you save the image too.

Dim Bmp As New Bitmap(PictureBox1.Width, PictureBox1.Height)
For x = 0 To PictureBox1.Width - 1
    For y = 0 To PictureBox1.Height - 1
        Bmp.SetPixel(x, y, Color.White)
    Next
Next
PictureBox1.Image = Bmp

Share via

Save Drawn Images Picturebox

Question

All replies (12)

Additional resources