Gaussian blur leads to white frame around image

Question

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

<Image ClipToBounds="True">
    <Image.Effect>
        <BlurEffect Radius="100" KernelType="Gaussian" RenderingBias="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.

Answer 1

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.

Answer 2

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.