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 的更多信息。