图像未显示在 Xamarin Forms ImageCircle 插件中

Posted 2023-02-19

【中文标题】图像未显示在 Xamarin Forms ImageCircle 插件中

【英文标题】：Image not showing inXamarin Forms ImageCircle plugin

【发布时间】：2020-09-05 03:09:54

【问题描述】：

我正在使用 Xamarin Forms 开发 android 应用程序。我在表单上添加了 ImageCircle 插件以显示个人资料图像。我想用手机相机拍摄的照片对其进行更新。所以要做到这一点，我有这些代码。

1。 XAML

 <controls:CircleImage x:Name="ImgProfile" BorderColor="DarkSlateGray" BorderThickness="5"  Aspect="AspectFit"  Scale="0.6" HeightRequest="150" WidthRequest="150" />
                            <ImageButton Source="pan.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"></ImageButton>

2。 C#

async void TakePhoto()
        
            await CrossMedia.Current.Initialize();
            var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            
                PhotoSize = Plugin.Media.Abstractions.PhotoSize.Small,
                Name = Guid.NewGuid().ToString().Substring(0,8),
                Directory= "profile"
            );

            if(file==null)
            
                return;
            

            ImgProfile.Source=  ImageSource.FromStream(() =>
            
                var stream = file.GetStream();
                return stream;
            );


        

        private void ImageButton_Clicked(object sender, EventArgs e)
        
            TakePhoto();

        

我也尝试了以下方法，但没有成功：

设置源 = file.Path

使用字节数组

xaml 中的 Binding ImageSource 并在后面的代码中设置 imagesource。

上面的代码运行良好，我可以在监视窗口中看到字节数组/流。但是，图像仍然没有显示。

请注意：

我的方法是老式的 WinForm 方式而不是 MVVM。

插件/模块版本

VS 2019 社区 16.5.5

Xamarin Android SDK - 10.2.0.100

Xamarin.Forms 4.6.0.800

Xamarin.Plugin.Media 5.0.1 Xamarin.Plugins.Forms.ImageCircle 3.0.0.5

提前致谢

【问题讨论】：

能否在github上分享一个简单的示例，我将下载您的示例进行测试。

如果是普通的Image会显示吗？

@Morse - 是的，硬编码的图像会显示出来。

@CherryBu-MSFT - 对不起，我不能。它是专有的，因此不能公开共享整个项目/代码。

ImageCircle 只是将现有图像转换为圆形。它没有那么灵活。尝试改用 FFloading Circle-ImageTransformations

【参考方案1】：

我用你的代码测试，可以拍照并在CircleImage中显示。

 <StackLayout>
    <!--  Place new controls here  -->
    <controls:CircleImage
        x:Name="ImgProfile"
        Aspect="AspectFit"
        BorderColor="DarkSlateGray"
        BorderThickness="5"
        HeightRequest="150"
        Scale="0.6"
        WidthRequest="150" />
    <ImageButton
        BackgroundColor="Transparent"
        Clicked="ImageButton_Clicked"
        Source="plu3.png" />
</StackLayout>

别忘了申请摄像头权限。

private async void ImageButton_Clicked(object sender, EventArgs e)
    
        var status = await CrossPermissions.Current.CheckPermissionStatusAsync(Permission.Camera);
        if (status != PermissionStatus.Granted)
        
            if (await CrossPermissions.Current.ShouldShowRequestPermissionRationaleAsync(Permission.Camera))
            
                await DisplayAlert("Need camera", "Gunna need that camera", "OK");
            

            var results = await CrossPermissions.Current.RequestPermissionsAsync(Permission.Camera);
            status = results[Permission.Camera];
        

        if (status == PermissionStatus.Granted)
        
            Console.WriteLine("camera access");

            var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            
                PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
                Directory = "Sample",
                Name = "test.jpg"
            );

            if (file == null)
                return;

            await DisplayAlert("File Location", file.Path, "OK");
            ImgProfile.Source = ImageSource.FromStream(() =>
            
                var stream = file.GetStream();
                file.Dispose();
                return stream;
            );
        
        else if (status != PermissionStatus.Unknown)
        
            await DisplayAlert("camera Denied", "Can not continue, try again.", "OK");
        


    

github上的示例，你可以看看：

https://github.com/CherryBu/PhotoApp