使用XAML将彩色图像转换为灰度图像? [英] Transform a colored image to a grayscale image using XAML?

问题描述

最好使用XAML

我需要动态地 从底部到顶部对彩色图像应用灰度滤镜.也就是说，我希望能够以编程方式更改应用于我的图像的灰度滤镜的偏移值.

I need to dynamically apply a gray-scale filter on a colored image from bottom to top. That's to say, i would like to be able to change the offset value of the gray-scale filter applied to my image pro grammatically.

例如，我想以编程方式将图像的50％设置为彩色(从图像的底部到中间)，将图像的另50％设置为灰度(例如从图像的中间).图片显示在顶部).

For example, I would like to programmatically set 50% of the image in color (from the bottom of the image to its middle), and the other 50% of the image in gray-scale (e.g. from the middle of the image to its top).

我读了很多不同的答案，尝试了许多不同的事情，并思考了许多不同的方法来实现这一目标.

I have read a lot of different answers, tried a lot of different things, and thought about a lot of different ways to do this.

• 我可以有两个图像，一个在另一个之上.一种是灰度的，另一种是彩色的.然后，我将以编程方式更改灰度图像的大小，以使其下方的彩色图像部分显示，并为用户创建一种半视图.

但是，此解决方案提出了一个我似乎无法解决的问题.更改灰度图像的高度值时，由于将拉伸"属性设置为均匀"(并且我不想更改为无")，因此图像会自动重新调整自身大小.

However, this solution poses an issue that I do not seem to be able to resolve. When changing the height value of the gray-scale image, the image automatically rescale itself due to the 'Stretch' property which is set to Uniform (and that I do not wish to change to None).

• 执行此操作的另一种方法是以编程方式更改图像的彩色像素.过去我在此方面取得了一些成功，但是，对于我在此处尝试执行的操作来说，这太慢了(理想情况下，我会将图像的颜色从灰度更改为由选择的图像的原始颜色)用户每隔50毫秒直到达到一定的高度).

• Another way to do this would be to programmatically change the color pixels of the image. I have had some success with this in the past, however, this is too slow for what I am trying to do here (ideally, I would be changing the colors of the image from gray-scale to the original color of the image selected by the user every 50 milliseconds until a certain height is reached).

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

A third method could be to apply an Opacity Mask on the image and use LinearGradientBrush to change the offset value to the desired position. This is the code I am currently using, it works but simply apply a gray color to the image without changing the original colors of the image to gray-scale (resulting in a sort of a washed out colored image):

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中):

Code-behind (in a timerEventProcessor that repeats itself every 50ms):

myImageLinearGradientBrushStop.Offset = percent * 0.01;

如前所述，我浏览了许多不同的网站，阅读了许多类似的问题，并尝试了许多不同的答案，但仍然不能令人满意地解决问题.

As mentioned previously, I have browsed a lot of different websites, read a lot of similar questions and tried a lot of different answers and still cant satisfactorily solve the problem.

推荐答案

下面的XAML使用带有两行的Grid来彼此显示两个图像.顶部图像的宽度和高度与底部图像的大小绑定，底部图像的大小跨越两个网格行.内部网格用于裁剪顶部图像.

The XAML below uses a Grid with two rows to display two Images on top of each other. The Width and Heigh of the top Image are bound to the size of the bottom Image, which spans both Grid rows. An inner Grid is used to clip the top Image.

<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>

这篇关于使用XAML将彩色图像转换为灰度图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！