How to overlay 2 png images with overlay so new combined colour where they not both transparent

Looking to combine 2 .png images of the same size and each has a transparent area into one single image.

Where the 2 images overlap I want to create a combine a colour that both pixels would make if they were mixed as paint (or any other combining feature colour)
but not to have the each image dimmed / lightened when it does not overlap pixels but shown at full strength colours.

Thanks.
stephenwildeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Don't know what you mean by combine a colour

<div class="wrapper">
    <img src="image.png">
    <img src="image.png">
</div>

Open in new window

.wrapper {
    position:relative;
}
.wrapper img {
    position:absolute;
}

Open in new window

0
Jaime OlivaresSoftware ArchitectCommented:
Besides the positioning stuff, you can use HTML5/CSS3 blending, although it may not work in old browser versions. Some tutorial: http://www.adobe.com/devnet/html5/articles/css-blending.html
0
stephenwildeAuthor Commented:
Thanks for replies but I have not explained the problem well enough.

It is when you add 2 separate images and combine into one single image.

It is like using 2 layers in Photoshop and producing one final image.

So would expect solution to be in c# .net, when the images are combined.
0
Robert SchuttSoftware EngineerCommented:
Well, assuming you mean combine colors like this: http://en.wikipedia.org/wiki/Additive_color
Additive coloring on wikipediaHere's some C# code to do that. There are simpler ways to combine images (using Graphics.DrawImage) but I can't find a way to do color blending like that with those functions, only alpha blending which does not seem to be what you want. That's the reason for the (slow) manual processing of each pixel.
// make sure these are included at the top of your code
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;

// call this from your code, Main, Form_Load or Button_Click for example
doMix(new string[] { "r.png", "g.png", "b.png" });

// the function that does the work
        private void doMix(string[] imageArray) {
            try {
                Bitmap[] bmSrcs = new Bitmap[imageArray.Length];
                // read all files into memory
                for (int b = 0; b < bmSrcs.Length; b++) {
                    bmSrcs[b] = new Bitmap(imageArray[b]);
                }
                Bitmap bmDst = new Bitmap(bmSrcs[0].Width, bmSrcs[0].Height);
                for (int y = 0; y < bmSrcs[0].Height; y++) {
                    for (int x = 0; x < bmSrcs[0].Width; x++) {
                        int a = 0, r = 0, g = 0, b = 0, iCount = 0;
                        foreach (Bitmap bmSrc in bmSrcs) {
                            Color colSrc = bmSrc.GetPixel(x, y);
                            // check alpha (transparency): ignore transparent pixels
                            if (colSrc.A > 0) {
                                a += colSrc.A;
                                r = Math.Max(r, colSrc.R);
                                g = Math.Max(g, colSrc.G);
                                b = Math.Max(b, colSrc.B);
                                iCount++;
                            }
                        }
                        Color colDst = Color.FromArgb(iCount > 1 ? (int)Math.Round((double)a / iCount) : a, r, g, b);
                        bmDst.SetPixel(x, y, colDst);
                    }
                }
                bmDst.Save("result.png", ImageFormat.Png);
            }
            catch (Exception ex) {
                MessageBox.Show(ex.ToString(), ex.Message, MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }

Open in new window

The 3 files I used as input are attached, the result looks like this:
resulting imager.png
g.png
b.png
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
stephenwildeAuthor Commented:
Thank you very much for such a full answer and explanation, much appreciated.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.