UWP 中的位图平滑 [英] Bitmap smoothing in UWP

问题描述

我正在尝试弄清楚如何在 UWP 中调整图像大小而不会降低质量.我知道在 WPF 中有一个选项可以使用这个平滑图像:RenderOptions.BitmapScalingMode="HighQuality" 但我似乎无法在 UWP 中找到等效项.

I am trying to figure out how to resize an image without losing quality in UWP. I know in WPF there's an option to smooth an image using this: RenderOptions.BitmapScalingMode="HighQuality" but I can't seem to find an equivalent in UWP.

图片如下:

它应该是什么样子:

如果仔细观察，您会发现图片像素化严重.如何在 UWP 中实现这一点?

If you look closely, you can see that the picture is badly pixelated. How can I achieve this in UWP?

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

I'm resizing it by XAML (circle crop):

<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 中找到任何其他设置.

I can't seem to find any other settings in both ImageBrush and BitmapImage that does it.

推荐答案

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

As an optimization, the framework will usually decode images at a smaller resolution to match the size of the target Image element displayed on screen, but this will only occur if the framework can determine straight away what the size of the target Image will be. If the framework cannot deduce this, then it will load the image at full resolution and be scaled down by the GPU instead which probably has shabby linear interpolation which makes images look gross when scaled down.

我认为这就是您的示例中发生的情况，因为 ImageBrush 不知道它所应用的 Ellipse 的大小.(这是显示图像的自定义方式.)

I think this is what's happening in your example because the ImageBrush doesn't know the size of the Ellipse it is applied to. (It's a custom way of displaying an image.)

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

Since you know the size of the Ellipse ahead of time, you can just tell the framework explicitly to decode the image at the resolution you specify.

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

关于此的更多信息这里.

这篇关于UWP 中的位图平滑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！