Base64 image to WPF image source error No imaging component suitable

Question

I am trying to decode a Base64 image and place it into a WPF image source. However, the code I am using has an error of:

No imaging component suitable to complete this operation was found.

I have double-checked that the Base64 string I have is, in fact, a correct Base64 encoding by using an online Base64 Decoder so I know its not that.

My code:

byte[] binaryData = Convert.FromBase64String(desc.Icon_Path);
MemoryStream ms = new MemoryStream(binaryData, 0, binaryData.Length);
ms.Write(binaryData, 0, binaryData.Length);
System.Drawing.Image image = System.Drawing.Image.FromStream(ms, true);
icon.Source = ToWpfImage(image);
ms.Dispose();

public BitmapImage ToWpfImage(System.Drawing.Image img)
{
  MemoryStream ms = new MemoryStream();
  img.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);

  BitmapImage ix = new BitmapImage();
  ix.BeginInit();
  ix.CacheOption = BitmapCacheOption.OnLoad;
  ix.StreamSource = ms;
  ix.EndInit();
  return ix;
}

What could I be doing incorrect?

Answer 1

Given that the Base64 string contains an encoded image buffer that can be decoded by one of WPF's BitmapDecoders, you do not need more code than this:

public static BitmapSource BitmapFromBase64(string b64string)
{
    var bytes = Convert.FromBase64String(b64string);

    using (var stream = new MemoryStream(bytes))
    {
        return BitmapFrame.Create(stream,
            BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
    }
}

Answer 2

The LoadImage function from here and Convert.FromBase64String is what you need. See the example below.

// MainWindow.xaml
<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!--Using data binding-->
        <Image Grid.Row="0" Source="{Binding ImageSource}" />
        <!--Using Code behind-->
        <Image Grid.Row="1" x:Name="Icon" />
    </Grid>
</Window>

Below is the code behind.

// MainWindow.xaml.cs
using System;
using System.ComponentModel;
using System.IO;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();    
        var mainWindowVm = new MainWindowViewModel();
        DataContext = mainWindowVm;

        byte[] buffer = File.ReadAllBytes(@"C:\temp\icon.jpg");
        string base64String = Convert.ToBase64String(buffer, 0, buffer.Length);

        // Option 1
        byte[] binaryData = Convert.FromBase64String(base64String);
        Icon.Source = MainWindowViewModel.LoadImage(binaryData);    
        // Option 2
        mainWindowVm.SetImageSource(Convert.FromBase64String(base64String));    
        // Option 3
        // mainWindowVm.SetImageSource(File.ReadAllBytes(@"C:\temp\icon.jpg"));
    }
}

public class MainWindowViewModel : INotifyPropertyChanged
{
    private ImageSource _imageSource;

    public ImageSource ImageSource
    {
        get { return _imageSource; }
        set
        {
            _imageSource = value;
            OnPropertyChanged("ImageSource");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void SetImageSource(byte[] imageData)
    {
        // You can also call LoadImage from here.
        var image = new BitmapImage();
        image.BeginInit();
        image.StreamSource = new MemoryStream(imageData);
        image.EndInit();    
        ImageSource = image;
    }

    public static BitmapImage LoadImage(byte[] imageData)
    {
        if (imageData == null || imageData.Length == 0) return null;
        var image = new BitmapImage();
        using (var mem = new MemoryStream(imageData))
        {
            mem.Position = 0;
            image.BeginInit();
            image.CreateOptions = BitmapCreateOptions.PreservePixelFormat;
            image.CacheOption = BitmapCacheOption.OnLoad;
            image.UriSource = null;
            image.StreamSource = mem;
            image.EndInit();
        }
        image.Freeze();
        return image;
    }

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

Answer 3

I dont think you need the ms.Write line do you? If you do you'll need to set ms.position = 0 after the write. This is because after the write the stream position will be at the end.

Answer 4

I wrote a converter that reads the base64 part and returns a byte array. WPF Image control can handle this by default and will present the image from that bunch of bytes.

using System.Globalization;
using System.Linq;
using System.Windows.Data;

public class DataUrlToByteArrayConverter : IValueConverter
{
    public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
    {
        if ( value is not string s ) return Binding.DoNothing;
        if ( s.StartsWith( "data:" ) && s.Contains( ";base64," ) )
        { // we have a data-url with base64 encoding
            var base64str = s.Split( ";base64," ).Last();
            return System.Convert.FromBase64String( base64str );
        }
        return Binding.DoNothing;
    }

    public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture )
    {
        throw new NotImplementedException();
    }
}

and you can use it in the view

<Window.Resources>
    <conv:DataUrlToByteArrayConverter x:Key="DataUrlToByteArray" />
</Window.Resources>

<Image Source="{Binding Image, Converter={StaticResource DataUrlToByteArray}}" />