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

时间:2017-08-29 07:05:12

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

我正试图从SVG中获得与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): enter image description here

如何从SVG中获得与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

1 个答案:

答案 0 :(得分:0)

感谢罗伯特的评论,我明白了。解决方案是将以下行添加到ImageAttributes类:

imageAttributes.SetGamma(0.45f);

Gamma值取自:

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