This question comes up from time to time, so I decided to answer this once and for all in an easy to share form: a blogpost. Read all about how to encode and decode Base64 images for viewing in .NET MAUI.
Spoiler alert: this is not specific to .NET MAUI, you can also use this with Xamarin.Forms, or WinUI or WPF, or… Well, you get the idea!
However, there are some serious considerations about using this method, so be sure to read all the way to the bottom!
The sample code for this post is on my GitHub account: https://github.com/jfversluis/MauiBase64ImageSample
What the Base64?!
Base64 is a way to convert binary files, usually images, to text. That way you can easily store them in, for instance, a database.
For this blog post I will be using the “official” .NET MAUI logo, the ones that we find next to the templates in Visual Studio currently. You can see it down below for reference.
Decoding Base64
If you have been dealing with converting one object to another, you probably already know the static Convert class in .NET. We can also use that same class to convert binary files from and to Base64.
Let’s first have a look at decoding an image. In the sample repository that I created for this post you can find a big string hidden in the Base64ImageProvider.cs file. This is the Base64 encoded version of the image above.
To use this in a regular .NET MAUI Image element, you can do the following.
Note how you would typically add the using keyword when using a Stream. In this case you don’t want to do that. Because that will close the Stream before the image gets loaded.
Encoding an Image as Base64 String
Now, let’s see how to do it the other way around, take an image and encode it as a string.
As you might have guessed by now, there is also a Convert.ToBase64String() method. We’ll need convert our file to a byte array and then we can convert it. In .NET MAUI, you can load a file that you provide inside of your app as a resource (under the Resources\Raw folder in the project) with the FileSystem APIs.
From that we get a Stream, that we load into a MemoryStream and a MemoryStream can be converted into a byte[].
Here I am using the using keywords so that the streams I have used are cleaned up after we’re done with them.
Of course there are other ways to get files, so you might have to do something different here instead of FileSystem.OpenAppPackageFileAsync, as long as you manage to convert your file to a byte array, you should be good.
Considerations
As you might know working with strings can be a very costly operation. With this that is no different. You’re first loading a very big string in memory as a byte array and only then put it in another stream that you’re going to use as an actual image.
This will be around 2.25 times the memory usage as when you would load the image directly from a stream, as also indicated by Jonathan Peppers. You can also spot this when you run the sample app. The simple image I’m using even has a noticeable lag while loading.
Additionally, the Base64 string variant of your image will be about 20-30% larger than the actual image.
Summary
Now you know how to work with Base64 and .NET MAUI images! While this post starts with how this can be used to save image in databases, that is something I do not typically recommend.
Databases usually aren’t optimized to hold these amounts of (binary) data. Typically what you want to do is save the images somewhere on disk and then save the path to said image in the database. That will also prevent the other considerations that I have mentioned above.
So all-in-all, while this is technically possible and you could choose to do so, I would like to ask you to seriously reconsider other options for actually doing this.
The code that I’ve use for this post is on this GitHub repository: https://github.com/jfversluis/MauiBase64ImageSample
Good luck!
You are a Lifesaver.
Thank you so much!
My pleasure! Thanks for reading!