开发者

Gaussian blur leads to white frame around image

I'm applying a blur effect to an image in WPF like so:

<Image ClipToBounds="True">
    <Image.Effect>
        <BlurEffect Radius="100" KernelType="Gaussian" R开发者_JAVA技巧enderingBias="Performance" />
    </Image.Effect>
</Image>

As you can see, the radius is large, because the image is large and I need it to be really blurry. However, for a radius that large I'm getting a light frame around my image as seen in the attached image. How can I suppress this?

In case you're wondering: The result is the same not matter the RenderingBias. A border is also produced in quality-mode.

Gaussian blur leads to white frame around image


What's happening is the result of a blur together with the ClipToBounds. Since you're using a Gaussian blur, the edges are going to naturally blend into the background (white).

Applying ClipToBounds basically cuts off where it would otherwise have been blending into the white, hence why you get a white frame.

Unless you're willing to clip the image even more, unfortunately this is just how blurs work.

Gaussian blur leads to white frame around image


Before blurring, You can pad the image using the pixels from the image border. By doing that you can assure that the blurred pixels around the border will be blurred using pixels of similar color and the whitish border will be gone. Of course, after blurring crop the image back to its original size.


I Found a way around this issue. My goal was to have a small image unstreched in the center of a control and the background to be filled with a streched blurry version of itself to fill the void.

With the following XAML I had the same issue with the corners of the image turning white like this:

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

Gaussian blur leads to white frame around image

I replaced the image with a grid and used a visual brush for the background which gives a little more flexibility than the image. Please note that setting the viebox of the visual brush like this removes the white fading but also cuts of part of the image, in my application however this was accetable:

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

Gaussian blur leads to white frame around image

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜