Question

in my application, I need to apply a blur-filter to an image. However, the effect should get stronger, the further the pixel is away from a line the user may draw freely in the image.

Lets assume the line the user draws splits the image horizontally exactly in the middle. Then along this line, the effect of the gradient should be 0%, half the way up and down from this line, the effect should be 50% etc. (If you have Picasa on your machine, there’s a similar effect for an elliptic gradient)

Now I thought I might try the following (which I have not, so far – I’m just collecting ideas here): I might create a 100% blurred version of the image and combine it with the original image using an alpha-mask. This alpha-mask would be created from a simple black/white linear gradient.

Do you think this might work? Are there other implementations possible using filters directly?

Answer 1

Yes, the approach you have in mind will work just fine. Here are two images, the left is a normal image and the right is composed of two images on top of each other where the bottom is normal and the top is blurred and the top uses an opacity mask to blend the two together:

<UniformGrid Columns="2">
    <Image Source="http://thecybershadow.net/misc/stackoverflow.png"/>
    <Grid>
        <Image Source="http://thecybershadow.net/misc/stackoverflow.png"/>
        <Image Source="http://thecybershadow.net/misc/stackoverflow.png">
            <Image.Effect>
                <BlurEffect Radius="5"/>
            </Image.Effect>
            <Image.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Image.OpacityMask>
        </Image>
    </Grid>
</UniformGrid>

And this is what it looks like with the right image progressively blurred as you go top to bottom: