在XAML中调整图片大小而不失去质量

Question

我有这张图片（原始尺寸：256x256）

我创建了这个XAML定义来在我的应用程序中显示该图像。

<Image Grid.Row="1" 
       Source="/MyProject;component/Images/happy.png" 
       Stretch="Fill" 
       Width="64" Height="64"  
       VerticalAlignment="Top" Margin="0,0,0,0" 
       HorizontalAlignment="Center" />

我得到了这个结果

我该如何做出更加平滑的调整大小？

- Naty Bizz

---

你正在寻找矢量图形，而不是位图。 - Federico Berasategui

以下所有答案可能会产生更高质量的图像，但@HighCore是正确的，你应该使用矢量而不是位图图像。 - Icemanind

@eranotzap 请查看这个答案，其中提到了这个工具。我自己没有尝试过，但是快速浏览表明它可以产生非常好的结果。 - Federico Berasategui

@eranotzap 还有，这个工具。 - Federico Berasategui

由于图像正在缩小（像素总数减少），因此使用矢量源相对没有太大优势，这只会混淆问题。尝试使用位图转矢量工具也几乎没有意义，因为你永远无法增加图像中已有的信息量。 - Simon Bridge

Answer 1

将RenderOptions.BitmapScalingMode="Fant"包含在您的图像中，例如：

<Image Grid.Row="1"
       Source="/MyProject;component/Images/happy.png"
       RenderOptions.BitmapScalingMode="Fant"
       Stretch="Fill"
       Width="64"
       Height="64"
       VerticalAlignment="Top"
       Margin="0,0,0,0"
       HorizontalAlignment="Center" />

- Daniel

---

对于命名为RenderOptions.BitmapScalingMode给予+1的支持。对我来说，“NearestNeighbor”提供了最佳结果。 - Tobias Valinski

墨尔本，你在窗体上设置了UseLayoutRounding=true或者在控件上设置了SnapToDevicePixels=true吗？如果没有，它会在设备像素之间“模糊”图像。 - Etienne Charland

Answer 2

通过 .xaml 为您的 Image 设置 RenderOptions.BitmapScalingMode 属性：

<Image Grid.Row="1" RenderOptions.BitmapScalingMode="HighQuality" ... />

额外信息：

RenderOptions.BitmapScalingMode是一个属性，它基于质量缩放图像。在WPF 4.0中，默认值为Unspecified，这表示LowQuality图像渲染。

但为了确保图像在尺寸增加时仍保持良好的质量，应选择BitmapScalingMode为HighQuality。

以下是BitmapScalingMode枚举成员及其来自msdn的描述：

1.Fant - 使用非常高质量的Fant位图缩放，速度比所有其他位图缩放模式都要慢，但会生成更高质量的输出。

2.HighQuality - 使用高质量的位图缩放，速度比LowQuality模式慢，但会生成更高质量的输出。HighQuality模式与Fant模式相同。

3.Linear - 使用线性位图缩放，速度比HighQuality模式快，但会生成较低质量的输出。

4.LowQuality - 使用双线性位图缩放，速度比HighQuality模式快，但会生成较低质量的输出。LowQuality模式与Linear模式相同。

5.NearestNeighbor - 使用最近邻位图缩放，当使用软件光栅化器时，它比LowQuality模式提供性能优势。此模式通常用于放大位图。

6.Unspecified - 使用默认的位图缩放模式，即Linear。

- Farhad Jabiyev

---

“但是要确保图像在尺寸增加时保持良好的质量，这不仅适用于尺寸增加，还适用于其他图像操作，如旋转或缩放（向上或向下）。理论上使用HighQuality会对性能产生影响，但随着当前硬件的发展，它应该成为默认选项。这将导致巨大的质量差异，因为它似乎激活了抗锯齿功能。” - Ben

Answer 3

如上所述，设置RenderOptions.BitmapScalingMode="HighQuality"会激活抗锯齿。我想为不知道什么是抗锯齿的用户提供一个示例。

没有这个设置：

<Image x:Name="InstrumentImage" />

使用此设置：

<Image x:Name="InstrumentImage" RenderOptions.BitmapScalingMode="HighQuality" />

在此处查看不同选项：https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.bitmapscalingmode?view=netframework-4.8

- Ben