FFImageLoading CircleTransformation not working with transparent image

Question

<StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="#57bcec" Padding="5" Orientation="Horizontal">
    <ContentView Padding="5,0,0,0">
        <ffimageloading:CachedImage DownsampleToViewSize="True" HorizontalOptions="Center" VerticalOptions="Center"
                                    ErrorPlaceholder="{Binding PlaceholderImage}" LoadingPlaceholder="{Binding PlaceholderImage}" 
                                    Source="{Binding UserImage, Converter={Helper:ImageSourceConverter}}"
                                    Aspect="AspectFit">
            <ffimageloading:CachedImage.WidthRequest>
                <OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40" WinPhone="40" />
            </ffimageloading:CachedImage.WidthRequest>
            <ffimageloading:CachedImage.HeightRequest>
                <OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40" WinPhone="40" />
            </ffimageloading:CachedImage.HeightRequest>
            <ffimageloading:CachedImage.Transformations>
                <fftransformations:CircleTransformation BorderSize="3" BorderHexColor="#34C04E"/>
            </ffimageloading:CachedImage.Transformations>
        </ffimageloading:CachedImage>
    </ContentView>
    <ContentView Padding="10,0,0,0" VerticalOptions="FillAndExpand">
        <Label Text="Alan Parker" FontSize="14" FontFamily="{StaticResource Lato_Regular}" TextColor="White" VerticalOptions="Center" />
    </ContentView>
</StackLayout>

Image URL: https://images.app.goo.gl/ZLSN5x9VNeebTD6z8

Output: Notice that image get cut-off from the corners

Normal Image:

Why have you added two `ContentView`'s for the controls? Also, there is too much padding there which could be the reason for the issue? Maybe 40 is too much and hence the view is not able to size itself? — FreakyAli, Nov 25 '19 at 12:43
@FreakyAli its not because of padding and two ContentView, and 40 is not that much big to render, because same is working with other image. — Divyesh, Nov 25 '19 at 12:54
@Divyesh,I use your code and use the image you provide the url, and I don't have any issue,the image can circle normally, so can you provide one simple sample that can reproduce this issue at github, I will download your sample to test. — Cherry Bu - MSFT, Nov 26 '19 at 06:13
@CherryBu-MSFT please would you share the screen shot of the output you have got, as I have share the same code which i'm using and getting this issue. — Divyesh, Nov 26 '19 at 07:16
@Divyesh_008, you can see the screenshot:https://github.com/CherryBu/ffimageloading/blob/master/Image%201.png — Cherry Bu - MSFT, Nov 26 '19 at 07:39
@Divyesh_008, Where is the link you share? Do you share one sample at github? please provide the link here. — Cherry Bu - MSFT, Nov 27 '19 at 00:35
@Divyesh_008, I have download your sample and test, I can reproduce your issue, I search some info, and find someone said that you will get this issue when you get image from url, so I suggest you can feedback this issue at https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API — Cherry Bu - MSFT, Nov 28 '19 at 08:58
@CherryBu-MSFT I have already mentioned this issue there: https://github.com/luberda-molinet/FFImageLoading/issues/1393, than i have post question here in search of solution — Divyesh, Nov 28 '19 at 09:19

Divyesh · Accepted Answer · 2019-12-05T09:30:32.857

I found one way to do this.

I have used: https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/ImageCropView

<imgcrop:ImageCropView HeightRequest="50" WidthRequest="50" x:Name="cropView"
        Source="https://anothercommonman.files.wordpress.com/2011/10/gandhiji.jpg">
        <imgcrop:ImageCropView.PreviewTransformations>
                <ffTransformations:CircleTransformation />
        </imgcrop:ImageCropView.PreviewTransformations>
</imgcrop:ImageCropView>

FFImageLoading CircleTransformation not working with transparent image

1 Answers1