如何將字節數組從 web API 轉換為圖像？

Question

我的 API 將許多圖像轉換為字節數組並返回字節，但我無法再次轉換為圖像。 我打算在一些列表視圖中顯示來自我的 API 的所有圖像。

我試過這個，但我無法獲得任何圖像，我試圖至少獲得一個。

        var url = "https://appmaragogi.com.br/api/Files/Upload?Id=ChurrascariaEstreladoMar";

        Byte[] imageAsBytes = client.GetByteArrayAsync(url).Result;

        MemoryStream stream1 = new MemoryStream(imageAsBytes);
        teste.Source = ImageSource.FromStream(() => { return stream1; });

我想在列表視圖中顯示所有圖像，或者一種獲取所有圖像的方法

我在 Xaml 中使用圖像來顯示圖像

Answer 1

我認為您只需要將其保存在本地文件中，您唯一需要檢查的是字節數組中圖像的格式是否正確

File.WriteAllBytes(nameLocalFile, imageAsBytes);

Answer 2

您可以嘗試使用從IValueConverter派生的轉換器，它可以根據字節數組創建圖像。

你可以參考我的這個帖子：

主要代碼如下：

ByteArrayToImageSourceConverter.cs

 public class ByteArrayToImageSourceConverter : IValueConverter
 {
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    ImageSource retSource = null;
    if (value != null)
    {
        byte[] imageAsBytes = (byte[])value;
        var stream = new MemoryStream(imageAsBytes);
        retSource = ImageSource.FromStream(() => stream);
    }
    return retSource;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    throw new NotImplementedException();
  }
}

圖像模型.cs

public class ImagesModel
{
   // other fields

   public byte[] PlayerImage { get; set; }
 }

xaml（使用示例）：

<ContentPage.Resources>
<ResourceDictionary>
    <myformapp1:ByteArrayToImageSourceConverter x:Key="ByteArrayToImage" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Margin="5">
<CollectionView x:Name="collectionView"
                ItemsSource="{Binding YoudataList}"> <!--changd to your dataList-->
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"  
                       x:Name="PlayerPic"
                       Source="{Binding PlayerImage, Converter={StaticResource ByteArrayToImage}}"
                       Aspect="AspectFill"
                       HeightRequest="60" 
                       WidthRequest="60" />
                <Label Grid.Column="1" 
                       Text="test1" 
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1" 
                       Text="test2"
                       FontAttributes="Italic" 
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>