Zobrazení Base64 obrázku v Xamarin.Forms

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.

Xamarin logo, soon to be Base64
Xamarin logo, již brzy jako Base64

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ů.

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.

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

Image served!
Zobrazené logo

Bonus – jen pro UWP

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.