How to convert byte array to image from web API?

Question

My API converts many images to Byte Array and returns the Bytes, but I can't converting again to image. I intend to display in some listview all images from my API.

I tried this but I can't get any image, I was trying to get at least one.

        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; });

I'd like to show all images in list view, or a way to get all images

i'm using a Image in Xaml to show the Image

Answer 1

I think that only what you need is to save it in a local file, the only thing you have to check is that the format of the image in byte array is fine

File.WriteAllBytes(nameLocalFile, imageAsBytes);

Answer 2

You can try to make use of a Converter derived from IValueConverter which could create the image back based on the byte array.

You can refer to my thread of this :

The main code is as follows:

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();
  }
}

ImagesModel.cs

public class ImagesModel
{
   // other fields

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

xaml(a usage example):

<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>