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>

有关此here的更多信息。