图像绘制在另一个图像的顶部与混合模式色 [英] Draw image on top of another image with blending mode color

问题描述

在Photoshop中，您可以选择颜色（从倒数第二）的混合模式设置为下一层：

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

如果你有一个顶部只是一个梯度图像的结果可能是这样的：

If you have just a gradient on top of an image the result could look like this:

混色模式，我发现某处的描述是：

The description of the color blending mode I found somewhere is:

的颜色改变色调和下层到上层的色调和饱和度的饱和度，但保留光度单独的

我的代码到目前为止是：

My code so far is:

using(var g = Graphics.FromImage(canvas))
{
    // draw the lower image
    g.DrawImage(lowerImg, left, top);

    // creating a gradient and draw on top
    using (Brush brush = new LinearGradientBrush(new Rectangle(0, 0, canvasWidth, canvasHeight), Color.Violet, Color.Red, 20))
    {
        g.FillRectangle(brush, 0, 0, canvasWidth, canvasHeight);
    }
}

但是，这是 - 当然 - 只是画过。较低的图像

But that is - of course - just painting over the lower image.

所以，问题是：

我怎么能在上面绘制图像使用混合模式色为可在Photoshop另一图片

编辑：

要让它多一点明确的是我想要实现：

To make it a bit more clear of what I want to achieve:

如果有人想用影像来进行测试：

And if someone wants to use the images for testing:

推荐答案

下面是我的解决方案。我用纽曼丰富的 HSLColor 类RGB和HSL值之间转换

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
}

这篇关于图像绘制在另一个图像的顶部与混合模式色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！