Convert A Byte[] Array to Image in Xamarin Forms

Question

Before asking this question I googled a lot but couldn't find a solution that suits mine.

In Xamarin.Forms I have a byte[] array and I want to Convert that byte[] array to an Image. How can I achieve that, this is what I tried:

In Front End(XAML):

<StackLayout BackgroundColor="Olive" x:Name="imagePanel">
    <Image x:Name="PdfImage" Aspect="AspectFill" IsVisible="true"/>
</StackLayout>

In Code Behind(C#):

byte[] imageAsBytes = Constant.jsonPDF;

var stream1 = new MemoryStream(imageAsBytes);
PdfImage.Source = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));

imagePanel.Children.Add(PdfImage);

But My problem is image is not displaying.

Can anybody tell me what I'm doing wrong. Any help would be greatly appreciated.

Actually that i don't know... `Constant.jsonPdf` contains the value and is coming from server. When i debug i can only see the `byte[694753]`. — Jestin Saji Chacko, Dec 06 '16 at 19:54
you should verify that - write it to disk and then look at it with an image viewer, or download it to your desktop with curl or your browser. If it's not a valid image type it won't display in the Image control — Jason, Dec 06 '16 at 20:37
Ok Thanks... I Saved the byte array to gallery using `DependencyService` but i'm only getting a blank screen ;( — Jestin Saji Chacko, Dec 07 '16 at 12:43
it sounds like it's either a bad image, or in some unsupported format — Jason, Dec 08 '16 at 14:56
So how can i find out whether the format is supported or not — Jestin Saji Chacko, Dec 08 '16 at 20:54
if the byte[] is not valid image data it doesn't matter what extension you use when saving — Jason, Dec 09 '16 at 13:07

score 11 · Answer 1 · answered May 31 '17 at 12:38

11

(XAML):

 <Image Grid.Row="1" x:Name="IncidentImageData" Grid.ColumnSpan="4" BackgroundColor="DarkGray" Aspect="AspectFill" WidthRequest="50" HeightRequest="175"/>

viewModel.SImageBase64 is a byte[]

Code Behind(C#):

var stream1 = new MemoryStream(viewModel.SImageBase64);
IncidentImageData.Source = ImageSource.FromStream(() => stream1);

simply i have done like this and image has shown.

answered May 31 '17 at 12:38

Ganesh Kumar

708
6
25

This doesn't work and is spoken about hundreds of times on the Xamarin Github and Microsoft Devs pages because `ImageSource.FromStream()` requires a brand new MemoryStream to be created within it's lambda function. You're very lucky if this worked for you but 9 times out of 10 this solution won't work. – Matthew Swallow Jun 28 '21 at 18:33
The slightly more long winded, but working way of doing it similarly to this is by converting the MemoryStream to a byte array and then using that byte array to create another MemoryStream within the lambda function of FromStream() – Matthew Swallow Jun 28 '21 at 19:28

score 9 · Answer 2 · edited Mar 29 '22 at 22:44

9

A Potential Fix

I know this thread is 2 years old now but I thought i'd post a working solution here for anyone who's also struggling with this. Just spent half a day researching and trying to solve an identical problem, the way the code was written on this post helped me greatly as it is almost 100% correct. You just need to provide the MemoryStream as a return from a lambda function within the FromStream() method.

Change this:

PdfImage.Source = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));

To:

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

And the snippet should be working as of Xamarin Forms 5.0.0.2012

Full Code:

byte[] imageAsBytes = Constant.jsonPDF;

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

imagePanel.Children.Add(PdfImage);

edited Mar 29 '22 at 22:44

chri3g91

1,196
14
16

answered Jun 28 '21 at 19:35

Matthew Swallow

179
1
11

1

Thanks for your solution it did work really good. I just had to change ´imagePanel.Children.Add(PdfImage)´ to ´PdfImage.Source = ImageSource.FromStream(() => { return new MemoryStream(qrCodeAsBitmapByteArr); });´. Without your answer I wouldn't be able success. Thanks a lot. EDIT: My bad, you already did that and i overlooked it. – user3772108 Jul 01 '21 at 12:13
1

no worries! if this helped then be sure to mark the thread as solved! – Matthew Swallow Jul 03 '21 at 10:59
I am not the OP but I gave you an upvote. :D – user3772108 Jul 03 '21 at 18:34
1

@MatthewSwallow , stream1 is no longer needed – jpcarts23 Nov 21 '21 at 18:05
1

Could have simplified like - PdfImage.Source = ImageSource.FromStream(() => new MemoryStream(imageAsBytes)); – Abhijith C R Dec 14 '21 at 10:16
Not working it shows empty @MatthewSwallow – Dev Xam Sep 27 '22 at 11:47
@DevXam is your byte array also empty? – Matthew Swallow Oct 10 '22 at 15:59
@MatthewSwallow, no byte array not empty. – Dev Xam Oct 11 '22 at 06:40
I have to convert the SVG image to a byte array, and the Byte array to an image source. Because SVG image value dynamically changes I don't know how to set image source that's why I follow above fix but working its shows empty. – Dev Xam Oct 11 '22 at 06:43

score 4 · Answer 3 · answered Jan 30 '19 at 05:44

4

Use this Code :

imgUserImage.Source = ImageSource.FromStream(() => new MemoryStream(userList.Single().ProfilePhoto));

Here profile photo type is byte[]

public byte[] ProfilePhoto { get; set; }

answered Jan 30 '19 at 05:44

Chandra Shakar

126
2
8

Code-only answers are discouraged. Please click on [edit] and add some words summarising how your code addresses the question, or perhaps explain how your answer differs from the previous answer/answers. [From Review](https://stackoverflow.com/review/late-answers/22067253) – Nick Jan 30 '19 at 06:01

Convert A Byte[] Array to Image in Xamarin Forms

3 Answers3

A Potential Fix