高斯模糊导致图像周围出现白色边框。

Question

我正在WPF中对图像应用模糊效果，代码如下：

<Image ClipToBounds="True">
    <Image.Effect>
        <BlurEffect Radius="100" KernelType="Gaussian" RenderingBias="Performance" />
    </Image.Effect>
</Image>

从图中可以看到，半径很大，因为图片很大，并且我需要它变得非常模糊。然而，使用这么大的半径会在图像周围产生一个轻微的边框，如附图所示。如何消除这个边框？

如果你想知道：无论RenderingBias如何，结果都是一样的。在质量模式下也会产生边框。

- Thorsten Dittmar

Answer 1

发生的情况是由于模糊效果与ClipToBounds混合的结果。由于使用了高斯模糊，边缘自然会混合到背景（白色）中。

应用ClipToBounds基本上切断了它本来会混合到白色中的地方，这就是为什么你得到一个白色边框的原因。

除非你愿意剪裁图像更多，不幸的是这就是模糊效果的工作方式。

- LongZheng

---

这正是我所想的 - 那么：是否有另一种方法可以模糊图像，使其不会像那样褪色？例如：当我使用Paint.NET应用高斯模糊滤镜对图像进行处理时，使用半径为100，我看不到那个边界。 - Thorsten Dittmar

WPF仅支持高斯模糊和盒式模糊（后者效果较差）。唯一的解决方法是删除ClipToBounds，因为这样可以获得更自然的外观。 - LongZheng

嗯，我能在代码中做些什么吗？我的目标是：获取源图像，创建一个模糊版本，并使用不透明度蒙版将它们混合在一起。 - Thorsten Dittmar

我猜你可以将它放在模糊图像后面以减少白色效果。我认为你不需要透明度蒙版，因为模糊部分会有部分透明度。 - LongZheng

Answer 2

在模糊之前，您可以使用图像边框中的像素填充图像。通过这样做，您可以确保周围的模糊像素将使用类似颜色的像素进行模糊处理，并且白色边框将消失。当然，在模糊之后，将图像裁剪回其原始大小。

- Gilad

Answer 3

我找到了解决这个问题的方法。 我的目标是在控件的中心有一个小图像，背景填充一个拉伸模糊版本的自身以填补空白。

使用以下XAML，我遇到了相同的问题，即图像的角落变成了白色，如下所示：

<Image ClipToBounds="True" Source="{Binding VideoDecoder.LiveImage}" Stretch="Fill">
    <Image.Effect >
        <BlurEffect Radius="100" RenderingBias="Performance" />
    </Image.Effect>
</Image>

我用网格替换了图像，并使用视觉画刷作为背景，这比图像更灵活。请注意，像这样设置视觉画刷的视口会消除白色淡化效果，但也会剪切部分图像，在我的应用程序中，这是可以接受的：

<Grid>
    <Grid.Background>
        <VisualBrush Viewbox="0.06,0.1,0.85,0.81">
            <VisualBrush.Visual>
                <Image Source="{Binding VideoDecoder.LiveImage}">
                    <Image.BitmapEffect>
                        <BlurBitmapEffect KernelType="Gaussian" RenderOptions.BitmapScalingMode="LowQuality" RenderOptions.EdgeMode="Unspecified"  Radius="100"/>
                    </Image.BitmapEffect>
                </Image>
            </VisualBrush.Visual>
        </VisualBrush>
    </Grid.Background>
</Grid>

- Denis Schaf