Kódování Base64 je poměrně často využíváno pro ukládání binárních dat jako řetězců, například obrázků na webu. Práce s Base64 je zabudována do .NETu a tak se podíváme, jak lze Base64 obrázek dekódovat a následně zobrazit v Xamarin.Forms aplikaci.

Ukázkový obrázek

Jako ukázkový obrázek jsem vybral PNG verzi loga Xamarinu. Pokud chcete, jeho Base64 verzi si můžete stáhnout jako součást zdrojového kódu na GitHubu.

Dekódování

Když přijde na konverzi "čehokoliv na cokoliv", třída System.Convert je většinou nejlepší místo, kde začít. Má čtyři metody týkající se Base64:

• ToBase64String

• FromBase64String

• ToBase64CharArray

• FromBase64CharArray

  Pro naše účely je nejvhodnější metoda FromBase64String, které poskytneme string zakódovaný v Base64 a zpět dostaneme zkonvertované pole bytů.

var byteArray = Convert.FromBase64String(source);

Zobrazení obrázku

Pro zobrazení obrázku potřebujeme instanci Xamarin.Forms.ImageSource. Tu můžeme vytvořit pomocí Streamu. A protože již máme pole bytů v paměti, MemoryStream je jasná volba.

Stream stream = new MemoryStream(byteArray);
var imageSource = ImageSource.FromStream(()=>stream);
MyImage.Source = imageSource;

A to je vše! Obrázek je nyní zobrazen a funguje na všech platformách.

Bonus – jen pro UWP

Pokud vyvíjíte jen UWP aplikaci, máte dvě alternativy pro vytvoření BitmapImage z Base64 stringu:

public async Task<BitmapImage> Base64StringToBitmapLongerAsync(string source)
{
    var inMemoryStream = new InMemoryRandomAccessStream();
    var byteArray = Convert.FromBase64String(source);
    var dataWriter = new DataWriter(inMemoryStream);
    dataWriter.WriteBytes(byteArray);
    await dataWriter.StoreAsync();
    inMemoryStream.Seek(0);
    var bitmapImage = new BitmapImage();
    bitmapImage.SetSourceAsync(inMemoryStream);
    return bitmapImage;
}

public async Task<BitmapImage> Base64StringToBitmapSimplerAsync(string source)
{
    var byteArray = Convert.FromBase64String(source);            
    BitmapImage bitmap = new BitmapImage();
    using (MemoryStream stream = new MemoryStream(byteArray))
    {
        await bitmap.SetSourceAsync(stream.AsRandomAccessStream());
    }
    return bitmap;
}

Obě řešení fungují stejně dobře, ale narozdíl od Xamarin.Forms využívají async/await s SetSourceAsync, což je doporučený postup v UWP.

Zdrojový kód

Ukázkový zdrojový kód si můžete prohlédnout na mém GitHubu.

Shrnutí

Ukázali jsme si, jak dekodovat Base64 obrázek a zobrazit jej v Xamarin.Forms aplikaci. Také jsme se podívali na alternativní přístupy v UWP s pomocí async.