Convert byte[] to Windows.UI.Xaml.Media.Imaging.BitmapImage

Question

Working on a Universal Windows App and trying to bind an image that is a byte array in the xaml. I'm a little lost. In the xaml I have something like:

<Image Source="{Binding SelectedImageSource}"
           Stretch="UniformToFill"
           Grid.Row="1"/>

And in my view model I have

private byte[] _selectedImageSource;
    public byte[] SelectedImageSource
    {
        get { return _selectedImageSource; }
        set
        {
            _selectedImageSource = value;
            OnPropertyChanged(nameof(SelectedImageSource));
        }
    }

But I can't see the image here. What I think I need to do is to convert the byte[] to a Windows.UI.Xaml.Media.Imaging.BitmapImage. I am not 100% sure though how to do that and if thats even the right thing to do.

Answer 1

Try this:

public static async Task<BitmapImage> GetBitmapAsync(byte[] data)
{
    var bitmapImage = new BitmapImage();

    using (var stream = new InMemoryRandomAccessStream())
    {
        using (var writer = new DataWriter(stream))
        {
            writer.WriteBytes(data);
            await writer.StoreAsync();
            await writer.FlushAsync();
            writer.DetachStream();
        }

        stream.Seek(0);
        await bitmapImage.SetSourceAsync(stream);
    }

    return bitmapImage;
}

You can also try simpler version described here , but I think I had some problems with it, that's why I use code from above now.

Answer 2

Works Fine:

    public async Task<BitmapImage> MyBitmapAsync(byte[] value)
    {
        if (value == null || !(value is byte[]))
            return null;
        using (InMemoryRandomAccessStream ms = new InMemoryRandomAccessStream())
        {
            using (DataWriter writer = new DataWriter(ms.GetOutputStreamAt(0)))
            {
                writer.WriteBytes((byte[])value);
                writer.StoreAsync().GetResults();
            }
            var image = new BitmapImage();
            image.SetSource(ms);
            return image;
        }
    }

Answer 3

@Andrey Ashikhmin your way is so good.

But I also have another way that is use WriteableBitmap . You can set image by URI and File.

UWP can convert WriteableBitmap and byte[]

Change the property as

private WriteableBitmap _selectedImageSource;
public WriteableBitmap SelectedImageSource
{
    get { return _selectedImageSource; }
    set
    {
        _selectedImageSource = value;
        OnPropertyChanged(nameof(SelectedImageSource));
    }
}

And set byte[] to WriteableBitmap

private async Task<ImageSource> FromBase64(byte[] bytes)
{

    var image = bytes.AsBuffer().AsStream().AsRandomAccessStream();

    // decode image
    var decoder = await BitmapDecoder.CreateAsync(image);
    image.Seek(0);

    // create bitmap
    var output = new WriteableBitmap((int)decoder.PixelHeight, (int)decoder.PixelWidth);
    await output.SetSourceAsync(image);
    return output;
}

If you want to read from file,use

    private static async Task<WriteableBitmap> OpenWriteableBitmapFile(StorageFile file)
    {
        using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read))
        {
            BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
            WriteableBitmap image = new WriteableBitmap((int)decoder.PixelWidth, (int)decoder.PixelHeight);
            image.SetSource(stream);

            return image;
        }
    }

If you want to convert WriteableBitmap to byte[] ,see : http://lindexi.oschina.io/lindexi/post/win10-uwp-%E8%AF%BB%E5%8F%96%E4%BF%9D%E5%AD%98WriteableBitmap-BitmapImage/

Thx https://codepaste.net/ijx28i give the code.