Search code examples
c#bitmappictureboxalphaalphablending

Overlay two or more Bitmaps to show in Picturebox (C#)


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.


Solution

  • 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.