UWP中的位图平滑

Question

我试图弄清楚如何在不损失UWP质量的情况下调整图像大小.我知道在WPF中有一个使用它可以平滑图像的选项:RenderOptions.BitmapScalingMode="HighQuality"但我似乎无法在UWP中找到相应的图像.

这是图像的样子:

它应该是什么样子:

如果你仔细观察,你会发现图像很难像素化.如何在UWP中实现这一目标？

我正在通过XAML(圆圈裁剪)调整大小:

<Ellipse x:Name="personImageContainer" Width="50" Height="50">
    <Ellipse.Fill>
        <ImageBrush x:Name="personImage" ImageSource="/Assets/BlankContact.png" Stretch="Uniform" />
    </Ellipse.Fill>
</Ellipse>

只是像这样设置图像:

personImage.ImageSource = new BitmapImage(new Uri("http://lorempixel.com/500/500/"));

我似乎无法在两者中找到任何其他设置ImageBrush并且BitmapImage这样做.

Answer 1

作为优化,框架通常会以较小的分辨率解码图像以匹配Image屏幕上显示的目标元素的大小,但这只有在框架可以立即确定目标大小的情况下Image才会发生.如果框架无法推断出这一点,那么它将以全分辨率加载图像并由GPU缩小,这可能具有破旧的线性插值,这使得图像在按比例缩小时看起来很粗糙.

我认为这是你的例子中发生的事情,因为ImageBrush它不知道Ellipse应用它的大小.(这是显示图像的自定义方式.)

由于您知道Ellipse提前的大小,因此您可以明确告诉框架以您指定的分辨率解码图像.

<!-- Bad: image will be full resolution -->
<Ellipse Width="50" Height="50">
    <Ellipse.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Cat.jpg"/>
    </Ellipse.Fill>
</Ellipse>

<!-- Better: image is scaled down nicely and uses less memory -->
<Ellipse Width="50" Height="50">
    <Ellipse.Fill>
        <ImageBrush Stretch="UniformToFill">
            <ImageBrush.ImageSource>
                <BitmapImage UriSource="Assets/Cat.jpg" DecodePixelType="Logical" DecodePixelWidth="50"/>
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Ellipse.Fill>
</Ellipse>

关于这方面更多的信息在这里.