How to blur an image in Xamarin Forms?

Question

Hi i am displaying an Image - i want to blur that image - how can that be acheieved?

I have tried using ffImageLoading:CachedImage and the Blurred Transformation - however it does not work on Android for some reason so looking for an alternative pls...

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

You can use SkiaSharp image filters to achieve this.

Especially Blurring vector graphics and bitmaps. The blur effect created by the SKImageFilter.CreateBlur static method has a significant advantage over the blur methods in the SKMaskFilter class: The image filter can blur an entire bitmap. The method has the following syntax:

public static SkiaSharp.SKImageFilter CreateBlur (float sigmaX, float sigmaY,  
                                                  SKImageFilter input = null,  
                                                  SKImageFilter.CropRect cropRect = null);  

The method has two sigma values — the first for the blur extent in the horizontal direction and the second for the vertical direction. You can cascade image filters by specifying another image filter as the optional third argument. A cropping rectangle can also be specified.

The Image Blur Experiment (MaskBlurExperimentPage.xaml.cs) page in the SkiaSharpFormsDemos includes two Slider views that let you experiment with setting various levels of blur.

The three screenshots show various settings for the sigmaX and sigmaY settings:

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi I had a look through the example - but its not so clear to me what I need to.

Do I need to put the whole layout into a Canvas View?

I've got the following layout:

 <StackLayout>


                                    <StackLayout Padding="0"
                                    BindableLayout.ItemsSource="{Binding SearchResults}">


                                        <BindableLayout.ItemTemplate>
                                            <DataTemplate>
                                                <StackLayout>

                                                <ffimageloading:CachedImage x:Name="box_profile_one" WidthRequest="150" HeightRequest="250" 
                                                                        Source="{Binding ProfilePic}"> 

                                                 <ffimageloading:CachedImage.Transformations>
                                                         <fftransformations:BlurredTransformation Radius="100" />
                                                         <fftransformations:RoundedTransformation Radius="20" CropHeightRatio="1.5" CropWidthRatio="1" /> 
                                                  </ffimageloading:CachedImage.Transformations>

                                                 </ffimageloading:CachedImage>
                                                </StackLayout>

                                            </DataTemplate>

                                        </BindableLayout.ItemTemplate>

                                    </StackLayout>