Scratch Image on PictureBox C#

Question

I coded this to scratch image on picturebox.

bool draw = false;

int pX = -1;
int pY = -1;

Bitmap drawing;

public Form1()
{
    drawing = new Bitmap(transformedImage.Width, transformedImage.Height, transformedImage.CreateGraphics());
    Graphics.FromImage(drawing).Clear(Color.Transparent);
}

private void transformedImage_MouseMove(object sender, MouseEventArgs e)
    {
        if (draw)
        {
            int penWidth = Convert.ToInt32(penWidthValue.Value);
            if(blackCheck.Checked == true) ///black pen
            {
                Graphics panel = Graphics.FromImage(drawing);

                Pen pen = new Pen(Color.Black, penWidth);

                pen.EndCap = LineCap.Round;
                pen.StartCap = LineCap.Round;

                panel.DrawLine(pen, pX, pY, e.X, e.Y);

                transformedImage.CreateGraphics().DrawImageUnscaled(drawing, new Point(0, 0));                    
            }
            else if(redCheck.Checked == true) /// red pen
            {
                Graphics panel = Graphics.FromImage(drawing);

                Pen pen = new Pen(Color.Red, penWidth);

                pen.EndCap = LineCap.Round;
                pen.StartCap = LineCap.Round;

                panel.DrawLine(pen, pX, pY, e.X, e.Y);

                transformedImage.CreateGraphics().DrawImageUnscaled(drawing, new Point(0, 0));
            }
            else if(yellowCheck.Checked == true) /// yellow
            {
                Graphics panel = Graphics.FromImage(drawing);

                Pen pen = new Pen(Color.Yellow, penWidth);

                pen.EndCap = LineCap.Round;
                pen.StartCap = LineCap.Round;

                panel.DrawLine(pen, pX, pY, e.X, e.Y);

                transformedImage.CreateGraphics().DrawImageUnscaled(drawing, new Point(0, 0));
            }
            else /// green
            {
                Graphics panel = Graphics.FromImage(drawing);

                Pen pen = new Pen(Color.Green, penWidth);

                pen.EndCap = LineCap.Round;
                pen.StartCap = LineCap.Round;

                panel.DrawLine(pen, pX, pY, e.X, e.Y);

                transformedImage.CreateGraphics().DrawImageUnscaled(drawing, new Point(0, 0));
            }

        }

        pX = e.X;
        pY = e.Y;
    }

    private void transformedImage_MouseDown(object sender, MouseEventArgs e)
    {
        if (scratchCheck.Checked == true)
        {
            draw = true;
            pX = e.X;
            pY = e.Y;
        }
    }

    private void transformedImage_MouseUp(object sender, MouseEventArgs e)
    {
        draw = false;
    }

    private void transformedImage_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.DrawImageUnscaled(drawing, new Point(0, 0));  
    }

But when I saved image using this:

SaveFileDialog sfd = new SaveFileDialog();
                sfd.Title = "Select Save Location";
                sfd.InitialDirectory = @"Save_Path";
                sfd.AddExtension = true;
                if (sfd.ShowDialog() == DialogResult.OK)
                {
                    switch (Path.GetExtension(sfd.FileName).ToUpper())
                    {
                        case ".BMP":
                            bmp.Save(sfd.FileName, ImageFormat.Bmp);
                            break;
                        case ".gif":
                            bmp.Save(sfd.FileName, ImageFormat.Gif);
                            break;
                        case ".JPG":
                            bmp.Save(sfd.FileName, ImageFormat.Jpeg);
                            break;
                        case ".JPEG":
                            bmp.Save(sfd.FileName,ImageFormat.Jpeg);
                            break;
                        case ".PNG":
                            bmp.Save(sfd.FileName, ImageFormat.Png);
                            break;
                        case ".png":
                            bmp.Save(sfd.FileName, ImageFormat.Png);
                            break;
                        default:
                            break;
                    }
                }

The image scratched on picturebox was not scratched.

This is scratched image on picturebox before saving:

But when I saved using above code, the scratches were gone missing:

How to saved the picture along with the scratches?, Thank you very much.

Small nitpick. In your switch statement (`Path.GetExtension(sfd.FileName).ToUpper()`), you don't need to include the lowercase variations: `case ".gif":` as they'll never be hit. — Blue, Aug 08 '16 at 05:19
We need to see more of the `SaveFileDialog()` code. (How are you calling it?) — Blue, Aug 08 '16 at 05:21
I coded that SaveFileDialog() in the button that will save the image on the picturebox. — Jake Muller, Aug 08 '16 at 05:43
what is `bmp`??? Should it be `drawing`?? Also simplify your mouse move method. The only difference between each `if` statement is the PenColor. Couln't you easily change the if statements to only set the Pen instance then you only need one section to actually draw the scratch... See this example.. https://dotnetfiddle.net/rEQKzB — Nico, Aug 08 '16 at 06:09
@FrankerZ Solved, I used the image variable to save it along with the scratches. — Jake Muller, Aug 08 '16 at 11:47

score 1 · Answer 1 · edited May 23 '17 at 11:44

Two common errors:

using CreateGraphics will not create persistent graphics. So: Alwas draw everything in the Paint event of the PictureBox! The MouseMove should only collect the points in a List<Point> or a List<List<Point>>. All drawing must happen in the Paint event using its e.Graphics object!
The drawing on the surface only gets saved if you use DrawToBitmap to create a new bitmap, which will combine up to three layers: the BackgroundImage, the Image and all persistent drawings.

See here for an example of drawing and here for an example of using DrawToBitmap!

As an alternative to this recommended way of drawing over an Image you can also draw directly into it. This is what are actually doing in the MouseMove, but later you ignore the image and draw it in a non-persistent way.

Finally: The Save routine is saving a bmp whichyou have not shown us, so we can only conclude that it is the original Image you loaded.. Maybe drawing.Save(..) would help..

But there are so many issues with the code, that you really should do a complete rewrite, starting with the confusing names! (Hint: do not call an object the name of a different type, like Graphics panel!!!) And obviously a variable of type Pen or Color would also help avoiding those repetitions...

Scratch Image on PictureBox C#

1 Answers1

Linked