10

In my C# program I have a Picturebox in which i want to show a stream of video (consecutive frames). I receive raw data, that I then transform into Bitmap or Image. I can show one image at a time without a problem (to reproduce the video stream).

Now my issue is that I want to merge 2 or more bitmaps (like layers) with the same size and alpha values (ARGB) and show it on the picturebox.

I have read lots of websites and posts here on SO, but many use the Graphics class, and I just can't draw it on my application (very likely because i'm new to C#! and already have my program setup, so I didn't want to change the structure).

What i need (to know):

  1. How to overlay two or more Bitmaps with alpha values;
  2. NO pixel manipulation please, can't afford that cost in performance.

Thank you so much in advance!

NOTE: I think this question shouldn't be marked (or closed) as duplicate, because everything i found in SO is done either with pixel manipulation or through the Graphics class. (but I might be wrong!)

EDIT: Possible workaround (NOT the solution to the question)
In A PictureBox Problem, the 4th answer (from user comecme) tells me to have 2 picturebox, one on top of the other. The only (extra) thing I had to do to make it work with this approach was:

private void Form1_Load(object sender, EventArgs e)
{
    pictureBox2.Parent = pictureBox1;
}

Where pictureBox2 will be the one on top.

I won't consider this an answer to this problem, because I consider it a workaround (specially because having more than 10 pictureboxes doesn't seem ideal! lol). That's why I will leave this question opened waiting for a real answer to my question.

EDIT: Resolved! check my answer.

4
  • hm.. Try to use SlimDX + HLSL code to overlay two images in fast way. (Still there would be pixel manipulation which is done at GPU side,- thus fast) Jan 18, 2013 at 11:12
  • 0x69 thks for the answer, but this application is part of a much bigger "system" to be released to public, so I was expecting something easier/regardless of external frameworks..
    – StinkyCat
    Jan 18, 2013 at 11:23
  • Very often performance increase comes with complexity penalty. Jan 18, 2013 at 11:35
  • I do know that 0x69 :) but i'm searching now about having two pictureboxes, with a "parental relationship", as i just found here on SO. Not exactly what i was looking for, but the result would be the same. I'll update my question once I've found my answer. thank you
    – StinkyCat
    Jan 18, 2013 at 11:38

1 Answer 1

13

Here is the real answer to my problem.
1) Use a List<Bitmap> to store all the images you want to blend;
2) Create a new Bitmap to hold the final image;
3) Draw each image on top of the final image's graphics using the using statement.

The code:

List<Bitmap> images = new List<Bitmap>();  
Bitmap finalImage = new Bitmap(640, 480);

...

//For each layer, I transform the data into a Bitmap (doesn't matter what kind of
//data, in this question) and add it to the images list
for (int i = 0; i < nLayers; ++i)
{
    Bitmap bitmap = new Bitmap(layerBitmapData[i]));
    images.Add(bitmap);
}

using (Graphics g = Graphics.FromImage(finalImage))
{
    //set background color
    g.Clear(Color.Black);

    //go through each image and draw it on the final image (Notice the offset; since I want to overlay the images i won't have any offset between the images in the finalImage)
    int offset = 0;
    foreach (Bitmap image in images)
    {
        g.DrawImage(image, new Rectangle(offset, 0, image.Width, image.Height));
    }   
}
//Draw the final image in the pictureBox
this.layersBox.Image = finalImage;
//In my case I clear the List because i run this in a cycle and the number of layers is not fixed 
images.Clear();

Credits go to Brandon Cannaday in this tech.pro webpage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.