使用 XAML 将彩色图像转换为灰度图像？

Question

最好使用 XAML，

我需要从下到上在彩色图像上动态应用灰度滤镜。也就是说，我希望能够以语法方式更改应用于我的图像程序的灰度滤镜的偏移值。

例如，我想以编程方式将图像的 50% 设置为彩色（从图像底部到中间），将图像的其他 50% 设置为灰度（例如从图像的中间到其中间）顶部）。

我读了很多不同的答案，尝试了很多不同的事情，并考虑了很多不同的方法来做到这一点。

• 我可以有两张图片，一张叠在另一张上面。一种是灰度的，另一种是彩色的。然后，我将以编程方式更改灰度图像的大小，以便其下方的彩色图像部分显示并向用户创建一种半半视图。

然而，这个解决方案提出了一个我似乎无法解决的问题。当更改灰度图像的高度值时，由于“拉伸”属性设置为“均匀”（并且我不希望更改为“无”），图像会自动重新缩放自身。

• 另一种方法是以编程方式更改图像的颜色像素。我过去在这方面取得了一些成功，但是，这对于我在这里尝试做的事情来说太慢了（理想情况下，我会将图像的颜色从灰度更改为由用户每 50 毫秒一次，直到达到一定高度）。

• 第三种方法是在图像上应用不透明蒙版，并使用LinearGradientBrush将偏移值更改为所需位置。这是我当前正在使用的代码，它可以工作，但只需将灰色应用于图像，而不将图像的原始颜色更改为灰度（导致某种褪色的彩色图像）：

XAML：

<Image x:Name="myImage" HorizontalAlignment="Left" VerticalAlignment="Top" Source="C:\Users\Clement\Desktop\test.png" Canvas.Left="159" Canvas.Top="81" Width="500" Height="375" >
            <Image.OpacityMask>
                <LinearGradientBrush EndPoint="0.5,0" MappingMode="RelativeToBoundingBox" StartPoint="0.5,1">
                    <GradientStop x:Name="myImageLinearGradientBrushStop" Color="Black"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                </LinearGradientBrush>
            </Image.OpacityMask>
</Image>

代码隐藏（在每 50 毫秒重复一次的timerEventProcessor 中）：

myImageLinearGradientBrushStop.Offset = percent * 0.01;

正如前面提到的，我浏览了很多不同的网站，阅读了很多类似的问题并尝试了很多不同的答案，但仍然无法令人满意地解决问题。

Answer 1

下面的 XAML 使用具有两行的网格来显示两个图像。顶部图像的宽度和高度绑定到底部图像的大小，该图像跨越两个网格行。内部网格用于裁剪顶部图像。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Image x:Name="image" Grid.RowSpan="2" Source="..."/>

    <Grid>
        <Image Width="{Binding ActualWidth, ElementName=image}"
               Height="{Binding ActualHeight, ElementName=image}"
               HorizontalAlignment="Center" VerticalAlignment="Top">
            <Image.Source>
                <FormatConvertedBitmap Source="{Binding Source, ElementName=image}"
                                       DestinationFormat="Gray8"/>
            </Image.Source>
        </Image>
    </Grid>
</Grid>