• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 868
  • Last Modified:

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.

1 Solution
Don't know what you mean by combine a colour

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

Open in new window

.wrapper {
.wrapper img {

Open in new window

Jaime OlivaresCommented:
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
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.
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);
                        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
stephenwildeAuthor Commented:
Thank you very much for such a full answer and explanation, much appreciated.

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now