Save Image in PictureBox with overlapping Controls

Question

I am developing an application in which user can select an image in a picture box.

After that he can right click on the image and add a user control which will again display an Image along with some text. This user control can be added any number of times.

User can also re-position the user controls as per need.

All this functionality has been implemented and is working fine.

Now, the requirement is to save the Image along with the user control.

Above you can see the complete image which needs to be saved. Back image is the picture box image and the user control (small images with text).

When user will click on save button the image should get saved on his disk as a single image.

This is a windows application developed in C#.

I want to know that whether this functionality can be achieved or not. If yes, then please guide me in the right direction.

Answer 1

If you create a copy of the bitmap then with the Graphics.DrawImage() you can draw those images onto it. You need to calculate the position of those controls.

Look here for DrawImage: http://msdn.microsoft.com/en-us/library/42807xh1.aspx

example:

Bitmap copy = new Bitmap(OriginalBitmap);

Graphics g = Graphics.FromImage(copy);

g.DrawImage(arrowBitmap, new Point(..));

copy.Save(...);

Answer 2

A very simple and straight forward solution exists, has been thought of by Microsoft and includes these steps:

• Instead of PictureBox use a Panel and instead of using the Image property of the PictureBox use the BackgroundImage property of the Panel

note: By using also the BackgroundImageLayout property you can quite easily instruct the Panel to stretch, center or zoom the image (I'm presuming the default value which is tile is not a good option in your case)

• Instead of placing the other user controls at higher Z order but alongside the previous PictureBox place them inside the Panel

• Use the Control.DrawToBitmap method like so:

  private void button1_Click(object sender, EventArgs e) {
      var bmp = new Bitmap(this.panel1.Width, this.panel1.Height);
      this.panel1.DrawToBitmap(bmp, new Rectangle(Point.Empty, bmp.Size));
      bmp.Save(@"D:\test.png", ImageFormat.Png);
  }
  

That will result in your controls begin rendered along with the picture:

Furthermore, and if your scenario allows it, you could simply use the DrawToBitmap method with any control which contains all of the actors you wish to render, for instance the actual Form.