.NET MAUI - Base64 Image Encode/Decode

Introduction

Imagine building an app that works on different devices like phones and computers using .NET MAUI. Sometimes, it's tricky to show images in your app, especially when they're encoded in Base64. This blog helps you figure out how to do that easily. We'll break down the steps, making it simple for 10th-grade students to follow along. By the end, you'll know how to make your app look cool with Base64 images in .NET MAUI!

Quick Links

Project Setup
Implementation
Demo
Download Code

Project Setup

Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
In the Additional information window, click the Create button:
Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Open MainPage.xaml file and update the UI as per requirement. And below my screen design.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBase64Image.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                x:Name="base64Result"
                Text=""
                MaxLines="5"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="12"
                HorizontalOptions="Center" />

            <Button
                x:Name="EncodeBtn"
                Text="Base64 Encode"
                Clicked="OnEncodeClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="imagePreview"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="DecodeBtn"
                Text="Base64 Decode"
                Clicked="OnDecodeClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Base64 String to Image

If you're into turning one thing into another, the Convert class in .NET is like a superhero! It helps change stuff, even binary files, into this special code called Base64.

Here's a little example code that shows how to use this superhero class to make a special picture show up in a .NET MAUI app. But here's the trick: don't use the word 'using' like we usually do when talking to the computer. If we do that, it might close the door too early before the picture is ready to show.

var imageBytes = Convert.FromBase64String(base64Result.Text);
MemoryStream imageDecodeStream = new(imageBytes);
imagePreview.Source = ImageSource.FromStream(() => imageDecodeStream);

Image to Base64 String

Now, let's learn how to do the opposite – turning a picture into a base64 string! We use something called Convert.ToBase64String() in .NET MAUI, which is like a tool for this job.

As you might have guessed, the first step is changing our picture into something called a byte array, which is like breaking it into small pieces. In .NET MAUI, you can grab a file from your app (maybe in the Resources\Raw folder) using the FileSystem tools.

using var imageEncodeStream = await FileSystem.OpenAppPackageFileAsync("icon.png");
using var memoryStream = new MemoryStream();

imageEncodeStream.CopyTo(memoryStream);
base64Result.Text = Convert.ToBase64String(memoryStream.ToArray());

Here's how it works: we turn the picture into a Stream, put it in a special memory place called MemoryStream, and then change it into those small pieces, the byte array. Take a look at this code example to see how it's done.

See those 'using' words? They make sure everything is cleaned up nicely when we finish. Remember, there could be different ways to get files, but as long as you can turn your picture into a byte array, you're good to go in your .NET MAUI journey!

Download Code

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.