Draw image on top of another image with blending mode color

Question

In Photoshop you can select \"Color\" (the second from the bottom) to set the blending mode to the next lower layer:

Answer 1

Here is my solution. I've used Rich Newman's HSLColor class to convert between RGB and HSL values.

using (Bitmap lower = new Bitmap("lower.png"))
using (Bitmap upper = new Bitmap("upper.png"))
using (Bitmap output = new Bitmap(lower.Width, lower.Height))
{
    int width = lower.Width;
    int height = lower.Height;
    var rect = new Rectangle(0, 0, width, height);

    BitmapData lowerData = lower.LockBits(rect, ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb);
    BitmapData upperData = upper.LockBits(rect, ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb);
    BitmapData outputData = output.LockBits(rect, ImageLockMode.WriteOnly, PixelFormat.Format24bppRgb);

    unsafe
    {
        byte* lowerPointer = (byte*) lowerData.Scan0;
        byte* upperPointer = (byte*) upperData.Scan0;
        byte* outputPointer = (byte*) outputData.Scan0;

        for (int i = 0; i < height; i++)
        {
            for (int j = 0; j < width; j++)
            {
                HSLColor lowerColor = new HSLColor(lowerPointer[2], lowerPointer[1], lowerPointer[0]);
                HSLColor upperColor = new HSLColor(upperPointer[2], upperPointer[1], upperPointer[0]);
                upperColor.Luminosity = lowerColor.Luminosity;
                Color outputColor = (Color) upperColor;

                outputPointer[0] = outputColor.B;
                outputPointer[1] = outputColor.G;
                outputPointer[2] = outputColor.R;

                // Moving the pointers by 3 bytes per pixel
                lowerPointer += 3;
                upperPointer += 3;
                outputPointer += 3;
            }

            // Moving the pointers to the next pixel row
            lowerPointer += lowerData.Stride - (width * 3);
            upperPointer += upperData.Stride - (width * 3);
            outputPointer += outputData.Stride - (width * 3);
        }
    }

    lower.UnlockBits(lowerData);
    upper.UnlockBits(upperData);
    output.UnlockBits(outputData);

    // Drawing the output image
}

Answer 2

Here's a safe (and slower) version of the accepted answer for completeness.

        using (var lower = new Bitmap(@"lower.png"))
        using (var upper = new Bitmap(@"upper.png"))
        using (var output = new Bitmap(lower.Width, lower.Height))
        {
            var width = lower.Width;
            var height = lower.Height;

            for (var i = 0; i < height; i++)
            {
                for (var j = 0; j < width; j++)
                {
                    var upperPixel = upper.GetPixel(j, i);
                    var lowerPixel = lower.GetPixel(j, i);

                    var lowerColor = new HSLColor(lowerPixel.R, lowerPixel.G, lowerPixel.B);
                    var upperColor = new HSLColor(upperPixel.R, upperPixel.G, upperPixel.B) {Luminosity = lowerColor.Luminosity};
                    var outputColor = (Color)upperColor;

                    output.SetPixel(j, i, outputColor);
                }
            }

            // Drawing the output image
        }

Answer 3

You will have to restructure your code so that you draw your gradient on a temporary bitmap, read each pixel from the temporary bitmap and canvas, and write a composed pixel to canvas. You should be able to find code converting between RGB and HSL colors, and once you can do that, setting the hue and saturation of pixels in canvas to the values from your temporary bitmap is trivial (though it's a bit harder if you want to use alpha values).