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

16,272

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.

Share:
16,272
StinkyCat
Author by

StinkyCat

Currently @ TTS Lab 2 years @ Cybermap 1 year @ CoVii Master in Industrial Electronics and Computers at University of Minho, Portugal. My thesis's work was based on controlling a 'home-made' car wirelessly with an iPod touch. The languages used were C++ on linux and objective-C on iOS.

Updated on June 04, 2022

Comments

  • StinkyCat
    StinkyCat almost 2 years

    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.