Размытие по Гауссу приводит к белой рамке вокруг изображения

#c# #wpf #image #blur

#c# #wpf #изображение #размытие

Вопрос:

Я применяю эффект размытия к изображению в WPF следующим образом:

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

Как вы можете видеть, радиус большой, потому что изображение большое, и мне нужно, чтобы оно было действительно размытым. Однако при таком большом радиусе я получаю светлую рамку вокруг моего изображения, как видно на прикрепленном изображении. Как я могу это подавить?

На случай, если вам интересно: результат тот же, независимо от RenderingBias . Граница также создается в режиме качества.

Белая рамка вокруг изображения

Ответ №1:

То, что происходит, является результатом размытия вместе с ограничениями клипа. Поскольку вы используете размытие по Гауссу, края будут естественным образом сливаться с фоном (белым).

Применение ClipToBounds в основном отсекает места, где в противном случае они сливались бы с белым, поэтому вы получаете белую рамку.

К сожалению, именно так работают размытия, если вы не хотите обрезать изображение еще больше.

Скриншот cliptobounds

Комментарии:

1. Вот что я подумал — итак: есть ли другой способ размыть изображение, чтобы оно не исчезало подобным образом? Например: Когда я использую Paint. NET чтобы применить фильтр размытия по Гауссу к изображению, используя радиус 100, я не вижу эту границу.

2. WPF поддерживает только размытие по Гауссу и размытие в рамке (что еще хуже). Единственный обходной путь — это удалить ClipToBounds, поскольку это должно привести к более естественному виду.

3. Хм. Могу ли я что-нибудь сделать в коде? Что я хочу сделать, так это: взять исходное изображение, создать размытую версию и смешать их вместе, используя маску непрозрачности.

4. Я думаю, вы могли бы поместить его за размытым изображением, чтобы уменьшить эффект белого. Я не думаю, что вам понадобится маска непрозрачности, поскольку размытые части будут иметь частичную непрозрачность.

Ответ №2:

Перед размытием вы можете дополнить изображение, используя пиксели от границы изображения. Делая это, вы можете гарантировать, что размытые пиксели вокруг границы будут размыты с использованием пикселей аналогичного цвета, а беловатая граница исчезнет. Конечно, после размытия обрезайте изображение до его первоначального размера.

Ответ №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>
  

введите описание изображения здесь