How to overlay two images (as byte arrays)

Question

People, I'm sure this is pretty easy, but google didn't help ...

Here's the task - I have two byte arrays (like ARGB) representing my images. They are the same size. What operation should I perform (byte by byte) to overlay one image on another? The second image has some transparency that needs to be considered.

To clear, im is looking for a code like this:

          bytes[] result = new bytes[first.Length];
          for(i = 0; i< first.Lenght;i++)
          {
               result[i] = first[i] !!%SOMETHING%!! second[i];
          }

Simple guesses such as bitwise OR (I know this is stupid;)) do not work.

Thanks for your answers.

edit: I can’t use the standard library due to security issues (all of these weird manipulations happen in Silverlight).

Answer 1

, , , , .

System.Drawing.Graphics CompositingMode, SourceCopy ( - ) SourceOver ( ).

. MSDN: -.

, - . 0.0 1.0 :

(aOld * oldValue) + ((1 - aOld) * aNew * newValue)

oldValue - , newValue - , , aOld aNew - . , , R, G B .

: Alpha Compositing ( wiki) .

---

: , , OP, , .

, byte[] A, R, G, B ( Length 4). , .

bytes[] result = new bytes[first.Length];
for(i = 0; i < first.Length; i += 4)
{
    byte a1 = first[i];
    byte a2 = second[i];
    byte r1 = first[i+1];
    byte r2 = second[i+1];
    byte g1 = first[i+2];
    byte g2 = second[i+2];
    byte b1 = first[i+3];
    byte b2 = second[i+3];

    byte a = a1 + (255 - a1) * a2 / 255;
    byte r = r1 * a1 / 255 + r2 * (255 - a1) * a2 / 65025;
    byte g = g1 * a1 / 255 + g2 * (255 - a1) * a2 / 65025;
    byte b = b1 * a1 / 255 + b2 * (255 - a1) * a2 / 65025;

    result[i] = a;
    result[i+1] = r;
    result[i+2] = g;
    result[i+3] = b;
}

Answer 2

, . , , , . :

• -
• 1 ( 2 0 1). 1 2 . , , , .

, .