如何在 C# 中获得 SVG feColorMatrix 效果答案

【问题标题】：How to get SVG feColorMatrix effect in C#如何在 C# 中获得 SVG feColorMatrix 效果
【发布时间】：2018-02-06 12:51:34
【问题描述】：

我试图从 C# 中获得与从 SVG feColorMatrix 效果中获得的相同的输出。

使用原始颜色红色 (#FF0000) 和以下矩阵（矩阵行/列切换为 SVG）：

0.2  0.7  0.7  0  0
0.0  0.0  0.0  0  0
0.0  0.0  0.0  0  0
0.0  0.0  0.0  1  0    
0.0  0.0  0.0  0  1

这是我目前得到的结果（左边是原始的，中间是来自 C#，右边是来自 feColorMatrix）：

如何从 C# 获得与从 SVG feColorMatrix 效果获得相同的输出？

我的 C# 代码：

// Create source bitmap
var sourceBitmap = new Bitmap(100, 100);
using (var sourceGraphics = Graphics.FromImage(sourceBitmap))
{
    sourceGraphics.FillRectangle(new SolidBrush(Color.FromArgb(255, 0, 0)), 0, 0, sourceBitmap.Width, sourceBitmap.Height);
}

sourceBitmap.Save(@"C:\Temp\sourceBitmap.png", ImageFormat.Png);

// Create color matrix
float[][] colorMatrixElements =
    {
        new[] { 0.2f, 0.7f, 0.7f, 0, 0 },
        new[] { 0.0f, 0.0f, 0.0f, 0, 0 },
        new[] { 0.0f, 0.0f, 0.0f, 0, 0 },
        new float[] { 0, 0, 0, 1, 0 },
        new float[] { 0, 0, 0, 0, 1 }
    };
var colorMatrix = new ColorMatrix(colorMatrixElements);

// Create target bitmap
var targetBitmap = new Bitmap(sourceBitmap);
using (var targetGraphics = Graphics.FromImage(targetBitmap))
{
    // Draw on target bitmap using color matrix
    var imageAttributes = new ImageAttributes();
    imageAttributes.SetColorMatrix(colorMatrix);
    var rect = new Rectangle(0, 0, sourceBitmap.Width, sourceBitmap.Height);
    targetGraphics.DrawImage(sourceBitmap, rect, 0, 0, sourceBitmap.Width, sourceBitmap.Height, GraphicsUnit.Pixel, imageAttributes);
}

targetBitmap.Save(@"C:\Temp\targetBitmap.png", ImageFormat.Png);

我用于 SVG 的代码（和结果图像）：

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="300px" 
     height="100px" 
     viewBox="0 0 300 100" >
  <defs>
    <filter id="colormatrixfilter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix id="colormatrix" 
                     type="matrix" 
                     in="SourceGraphic"
                     values="0.20 0.00 0.00  0 0
                             0.70 0.00 0.00  0 0
                             0.70 0.00 0.00  0 0
                             0.00 0.00 0.00  1 0" />
    </filter>
  </defs>

  <image x="0" y="0" width="100" height="100" xlink:href="sourceBitmap.png" />
  <image x="100" y="0" width="100" height="100" xlink:href="targetBitmap.png" />
  <image x="200" y="0" width="100" height="100" xlink:href="sourceBitmap.png" filter="url(#colormatrixfilter)" />
</svg>

RGB 代码（在结果上使用颜色选择器）：

Original:      r=255 g=0   b=0
C#:            r=51  g=178 b=178
feColorMatrix: r=124 g=218 b=218

【问题讨论】：

尝试将图像转换为linearRGB色彩空间，应用颜色矩阵滤镜，然后将结果转换回sRGB色彩空间。

标签： c# image-processing svg svg-filters colormatrix

【解决方案1】：

感谢罗伯特的评论，我想通了。解决方案是将以下行添加到 ImageAttributes 类中：

imageAttributes.SetGamma(0.45f);

Gamma 值取自：

https://en.wikipedia.org/wiki/Gamma_correction

【讨论】：