We Keep Coding

C#, How do i save picture using savefiledialog for paint-like program

I've tried many methods including bitmap converting and etc.
Here's my code. Would love it someone will explain to me how to save it and why. Thanks!
public partial class Form1 : Form
{
Graphics G;
Pen myPen = new Pen(Color.Black);
Point sp = new Point(0, 0);
Point ep = new Point(0, 0);
int ctrl = 0;
public Form1()
{
InitializeComponent();
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
sp = e.Location;
if(e.Button == MouseButtons.Left)
{
ctrl = 1;
}
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
ctrl = 0;
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if(ctrl == 1)
{
ep = e.Location;
G = panel1.CreateGraphics();
G.DrawLine(myPen, sp, ep);
}
sp = ep;
}
private void button1_Click(object sender, EventArgs e)
{
colorDialog1.ShowDialog();
myPen.Color = colorDialog1.Color;
colourBtn.BackColor = colorDialog1.Color;
}
private void clrBtn_Click(object sender, EventArgs e)
{
G.Clear(colorDialog2.Color);
}
private void button1_Click_1(object sender, EventArgs e)
{
colorDialog2.ShowDialog();
panel1.BackColor = colorDialog2.Color;
panel1Colourbtn.BackColor = colorDialog2.Color;
}
private void button1_Click_2(object sender, EventArgs e)
{
SaveFileDialog dlgSave = new SaveFileDialog();
dlgSave.Title = "Save Image";
dlgSave.Filter = "Bitmap Images (*.bmp)|*.bmp|All Files (*.*)|*.*";
if (dlgSave.ShowDialog(this) == DialogResult.OK)
{
using (Bitmap bmp = new Bitmap(panel1.Width, panel1.Height))
{
// how do i save my drawing using savefiledialog?
}
}
}

After you edited your question I suggest to do the following:
create a Bitmap member in your Form with the same dimensions as the panel
create the Graphics G from that bitmap
in your panel1_MouseMove draw on that Graphics (effectivly drawing into the bitmp`
in your panel1_Paint draw that bitmap on the panel and
in your button1_Click_2 save that bitmap:
Code example:
public partial class Form1 : Form
{
Bitmap bmp;
Graphics G;
Pen myPen = new Pen(Color.Black);
Point sp = new Point(0, 0);
Point ep = new Point(0, 0);
int ctrl = 0;
public Form1()
{
InitializeComponent();
// create bitmap
bmp = new Bitmap(panel1.Width, panel1.Height);
// create Graphics
G = Graphics.FromImage(bmp);
G.Clear(Color.Black);
// redraw panel
panel1.Invalidate();
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
// draw bitmap on panel
if (bmp != null)
e.Grahics.DrawImage(bmp, Point.Empty);
}
// shortened for clarity
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if(ctrl == 1)
{
ep = e.Location;
// draw onto graphics -> bmp
G.DrawLine(myPen, sp, ep);
}
sp = ep;
// redraw panel
panel1.Invalidate();
}
private void button1_Click_2(object sender, EventArgs e)
{
SaveFileDialog dlgSave = new SaveFileDialog();
dlgSave.Title = "Save Image";
dlgSave.Filter = "Bitmap Images (*.bmp)|*.bmp|All Files (*.*)|*.*";
if (dlgSave.ShowDialog(this) == DialogResult.OK)
{
bmp.Save(dlgSave.FileName);
}
}
}

Try this:
panel1.DrawToBitmap(bmp, new Rectangle(0, 0, panel1.Width, panel1.Height));
bmp.Save(dlgSave.FileName);

Mouse moving too fast when drawing in a graphics Object

i'm doing a C# project with my friend. We have to take a signature and save it to a JPG file. We don't have much idea of how doing this, but at least we are trying. We have 2 problems:
1.
When drawing the Graphics, if the mouse moves too fast, not all the points are caught by the mousemove Event and the result image are separated points. How can i improve this?
Here is my code:
private void ingresoFirma_Load(object sender, EventArgs e)
{
myBrush = new SolidBrush(Color.Black);
myGraphics = panel1.CreateGraphics();
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
isDrawing = true;
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (isDrawing)
{
myGraphics.FillEllipse(myBrush, e.X, e.Y, 10, 10);
}
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
isDrawing = false;
}
The second problem is that we have no idea of how to save the Graphics to a .jpg image. We used something like this:
private void saveSign_Click(object sender, EventArgs e)
{
Bitmap signature = new Bitmap(100,100,myGraphics);
signature.Save("c:\\myBitmap.bmp");
}
But it saves a blank image.

Here's something to get you started...
public partial class ingresoFirma : Form
{
private List<Point> stroke = null;
private List<List<Point>> Strokes = new List<List<Point>>();
public ingresoFirma()
{
InitializeComponent();
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
stroke = new List<Point>();
stroke.Add(new Point(e.X, e.Y));
}
}
private void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
stroke.Add(new Point(e.X, e.Y));
if (stroke.Count == 2)
{
Strokes.Add(stroke);
}
panel1.Refresh();
}
}
private void panel1_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
stroke = null;
}
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
foreach(List<Point> curStroke in Strokes)
{
e.Graphics.DrawLines(Pens.Black, curStroke.ToArray());
}
}
private void btnClear_Click(object sender, EventArgs e)
{
Strokes.Clear();
panel1.Refresh();
}
private void btnSave_Click(object sender, EventArgs e)
{
SaveFileDialog sfd = new SaveFileDialog();
sfd.Filter = "JPG Files(*.JPG)|*.JPG";
if (sfd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
Bitmap bmp = new Bitmap(panel1.Width, panel1.Height);
panel1.DrawToBitmap(bmp, panel1.ClientRectangle);
bmp.Save(sfd.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
}

With the DrawToBitmap() method of Control, you can save the image:
Bitmap theBitmap = new Bitmap(panel1.Width, panel1.Height)) ;
panel1.DrawToBitmap(theBitmap, new Rectangle(0, 0, bmp.Width, bmp.Height));
theBitmap.Save("c:\\myBitmap.bmp");

How to draw line when mouse up?

I am trying to set the starting point when the LMB is down and draw a line from the starting point to the current mouse position when the LMB is up, much like how MSPaint does it.
My problem is that I can't seem to get the line to appear on the picturebox when LMB is up. Can someone enlighten me please?
Edit:Sorry guys I realised the problem was elsewhere, but I learned a bunch of stuff in the process, thanks for all the input.
public partial class FormPaint : Form
{
Point? startPoint = Point.Empty;
Point? endPoint = Point.Empty;
bool isMouseDown = new Boolean();
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (Control.MouseButtons == MouseButtons.Left)
{
startPoint = e.Location;
isMouseDown = true;
}
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
brush = new SolidBrush(color);
using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
g.DrawLine(new Pen(brush), startPoint.Value, endPoint.Value);
pictureBox1.Invalidate();
}
isMouseDown = false;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
endPoint = e.Location;
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
using (brush = new SolidBrush(color))
{
e.Graphics.DrawLine(new Pen(brush, 5), startPoint.Value, endPoint.Value);
}
}
}

When you call Invalidate it forces the picture box to repaint. The problem is though that it discards everything you painted before. Then it calls the Paint on the picture box.
I would suggest to save the drawing data into a list and perform the painting inside the Paint event of the picture box using that saved data.
Also read How do I draw a circle and line in the picturebox?

Complete sample with line draw preview, enjoy.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WinForm
{
public partial class frmMain : Form
{
/// <summary>
/// form constructor
/// </summary>
public frmMain()
{
InitializeComponent();
}
private PictureBox imgCanvas;
private bool isMouseDown;
private Point startPoint;
private Point currentPoint;
/// <summary>
/// form load
/// </summary>
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
imgCanvas = new PictureBox
{
Location = new Point(8, 8),
Size = new Size(this.ClientSize.Width - 16, this.ClientSize.Height - 16),
Anchor = AnchorStyles.Left | AnchorStyles.Top | AnchorStyles.Right | AnchorStyles.Bottom,
BorderStyle = BorderStyle.Fixed3D,
};
imgCanvas.MouseDown += imgCanvas_MouseDown;
imgCanvas.MouseUp += imgCanvas_MouseUp;
imgCanvas.MouseMove += imgCanvas_MouseMove;
imgCanvas.Paint += imgCanvas_Paint;
this.Controls.Add(imgCanvas);
}
void imgCanvas_Paint(object sender, PaintEventArgs e)
{
if (isMouseDown)
{
e.Graphics.DrawLine(Pens.Red, startPoint, currentPoint);
}
}
void imgCanvas_MouseMove(object sender, MouseEventArgs e)
{
if (isMouseDown)
{
currentPoint = e.Location;
(sender as PictureBox).Refresh();
}
}
void imgCanvas_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
isMouseDown = true;
startPoint = e.Location;
}
}
void imgCanvas_MouseUp(object sender, MouseEventArgs e)
{
if (isMouseDown)
{
if (e.Button == MouseButtons.Left)
{
isMouseDown = false;
PictureBox pb = sender as PictureBox;
// create image
if (pb.Image == null)
{
pb.Image = new Bitmap(pb.ClientSize.Width, pb.ClientSize.Height);
}
// draw
using (Graphics g = Graphics.FromImage(pb.Image))
{
g.DrawLine(Pens.Green, startPoint, e.Location);
pb.Refresh();
}
}
}
}
}
}
Result:

How to draw many rectangles and save it to a loaded .jpg C#

I am trying to open a .jpg in Windows Form Application, draw a rectangle on it and save it with the rectangle.
In the following code I can load an .jpg and draw a rectangle to the pictureBox, but cannot save the .jpg with the rectangle. Someone knows the problem?
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace EditScreen
{
public partial class Form1 : Form
{
Rectangle mRect;
Image mainimage;
Bitmap newBitmap;
Graphics g;
Boolean opened = false;
OpenFileDialog ofd = new OpenFileDialog();
SaveFileDialog sfd = new SaveFileDialog();
public Form1()
{
InitializeComponent();
this.DoubleBuffered = true;
}
private void button1_Click(object sender, EventArgs e)
{
DialogResult dr = ofd.ShowDialog();
if (dr == DialogResult.OK)
{
mainimage = Image.FromFile(ofd.FileName);
newBitmap = new Bitmap(ofd.FileName);
pictureBox1.Image = mainimage;
opened = true;
}
}
private void button2_Click(object sender, EventArgs e)
{
DialogResult dr = sfd.ShowDialog();
if (opened)
{
mainimage.Save(sfd.FileName);
}
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
mRect = new Rectangle(e.X, e.Y, 0, 0);
pictureBox1.Invalidate();
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
mRect = new Rectangle(mRect.Left, mRect.Top, e.X - mRect.Left, e.Y - mRect.Top);
pictureBox1.Invalidate();
}
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
using (Pen pen = new Pen(Color.Red, 2))
{
Graphics g = e.Graphics;
g.DrawRectangle(pen, mRect);
}
}
}
}
I heard that I have to paint on the bitmap but when I do this I dont know how to use the PaintEventArgs. Can you give me a example for my code to save it with the drawings?

Draw on Panel, save as Bitmap

I'm trying to make a simple application where the user can draw on the Panel and save it to their computer as a bitmap. When I proceed to the save part, however, all I get is an empty (white) bitmap.
I've been browsing many other solutions and I am pretty sure I am saving the bitmap the correct way, so I am starting to wonder if my drawing process is incorrect. What exactly is wrong here?
public partial class Form1 : Form
{
SolidBrush brush;
Pen pen;
Point[] points = new Point[3];
Graphics display;
Bitmap bmap;
public Form1()
{
InitializeComponent();
display = panel1.CreateGraphics();
bmap = new Bitmap(panel1.Width, panel1.Height);
}
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
brush = new SolidBrush(Color.Black);
pen = new Pen(Color.Black);
display.FillEllipse(brush, e.X, e.Y, 10, 10);
panel1.DrawToBitmap(bmap, new Rectangle(0, 0, panel1.Width, panel1.Height));
//this.Invalidate();
}
private void clearToolStripMenuItem_Click(object sender, EventArgs e)
{
Graphics display = panel1.CreateGraphics();
display.Clear(panel1.BackColor);
}
private void saveToolStripMenuItem_Click(object sender, EventArgs e)
{
bmap.Save(#"C:\Temp\Test.bmp");
}
}
EDIT
With this revision, I just get a black bmp and I don't even see elipses being created anymore on my screen. Although I did notice that if I put invalidate and Draw to bitmap back in the mousedown event, then the save button will save the last ellipse, while there is still nothing appearing on my screen.
private void panel1_MouseDown(object sender, MouseEventArgs e)
{
mousedown = true;
x = e.X;
y = e.Y;
}
private void panel1_Paint(object sender, PaintEventArgs e)
{
//Graphics g = e.Graphics;
if(mousedown==true)
{
brush = new SolidBrush(Color.Black);
pen = new Pen(Color.Black);
Graphics.FromImage(bmap).FillEllipse(brush, x, y, 10, 10);
panel1.Invalidate();
//panel1.DrawToBitmap(bmap, new Rectangle(0, 0, panel1.Width, panel1.Height));
//panel1.Invalidate();
}
}

As Hans did most of the work in his comment, here is how your code should probably look:
public partial class Form1 : Form {
Bitmap bmap;
public Form1() {
InitializeComponent();
bmap = new Bitmap(panel1.ClientWidth, panel1.ClientHeight);
panel1.MouseDown += panel1_MouseDown;
panel1.Paint += panel1_Paint;
}
void panel1_Paint(object sender, PaintEventArgs e) {
e.Graphics.DrawImage(bmap, Point.Empty);
}
void panel1_MouseDown(object sender, MouseEventArgs e) {
using (Graphics g = Graphics.FromImage(bmap)) {
g.FillEllipse(Brushes.Black, e.X, e.Y, 10, 10);
}
panel1.Invalidate();
}
private void clearToolStripMenuItem_Click(object sender, EventArgs e) {
using (Graphics g = Graphics.FromImage(bmap)) {
g.Clear(Color.White);
}
panel1.Invalidate();
}
private void saveToolStripMenuItem_Click(object sender, EventArgs e) {
bmap.Save(#"c:\temp\bmap.bmp");
}
}
CreateGraphics is just a temporary canvas, so you rarely, if ever, use that for drawing purposes, especially since you are trying to save an image.

This will works fine. I tested it and worked well
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Imaging;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace drawing
{
public partial class Form2 : Form
{
Graphics g;
bool startPaint = false;
int? initX = null;
int? initY = null;
bool drawSquare = false;
bool drawRectangle = false;
bool drawCircle = false;
public Form2()
{
InitializeComponent();
bmp = new Bitmap(panel1.ClientSize.Width, panel1.ClientSize.Height);
}
Bitmap bmp;
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
}
void panel1_MouseMove(object sender, MouseEventArgs e)
{
if (startPaint)
{
using ( g = Graphics.FromImage(bmp))
{
// g.FillEllipse(Brushes.Black, new Rectangle(e.X, e.Y , 5, 5));
Pen p = new Pen(btn_PenColor.BackColor, float.Parse(cmb_PenSize.Text));
g.DrawLine(p, new Point(initX ?? e.X, initY ?? e.Y), new Point(e.X, e.Y));
initX = e.X;
initY = e.Y;
//g.DrawImage(bmp, new Rectangle(e.X - 4, e.Y - 4, 8, 8));
}
panel1.Invalidate();
}
}
private void pnl_Draw_MouseDown(object sender, MouseEventArgs e)
{
startPaint = true;
if (drawSquare)
{
//Use Solid Brush for filling the graphic shapes
SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);
//setting the width and height same for creating square.
//Getting the width and Heigt value from Textbox(txt_ShapeSize)
g.FillRectangle(sb, e.X, e.Y, int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));
//setting startPaint and drawSquare value to false for creating one graphic on one click.
startPaint = false;
drawSquare = false;
}
if (drawRectangle)
{
SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);
//setting the width twice of the height
g.FillRectangle(sb, e.X, e.Y, 2 * int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));
startPaint = false;
drawRectangle = false;
}
if (drawCircle)
{
SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);
g.FillEllipse(sb, e.X, e.Y, int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));
startPaint = false;
drawCircle = false;
}
}
private void pnl_Draw_MouseUp(object sender, MouseEventArgs e)
{
startPaint = false;
initX = null;
initY = null;
}
void panel1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(bmp, Point.Empty);
}
private void button1_Click(object sender, EventArgs e)
{
bmp.Save("D://filename.jpg", ImageFormat.Png);
}
}
}