#10 Wczytywanie obrazków z base64 do UIImageView w SWIFT

Witajcie, tym razem pominiemy funkcję z poprzedniego wpisu do pobierania obrazków z adresu url, a zajmiemy się obrazami w base64, które podamy już bezpośrednio w API w PHP. Najpierw zajmiemy się przeróbką API aby dodać nowe pole o nazwie image_base64.

Pierwszą ważną zmianą będzie przeróbka API tak aby dane obrazka były w base64. W tym celu wykorzystamy wbudowaną funkcję w jęyku PHP o nazwie base64_encode, oraz file_get_contents do otwierania pliku.  Najpierw otwieramy plik czyli w tym wypadku będzie to nasz obraz, podajemy pełną ścieżkę do metody file_get_content, a następnie przypisujemy wynik do zmiennej. Zmienną tą następnie podajemy jako argument do metody base64_encode, której wynik możemy wyświetlić na ekranie.

Wszystkie zmiany są bardzo proste i możemy je zmieścić w jednej lini, a całość powinna wyglądać tak jak poniżej.

<?php $brands[] = array( 'img' => 'http://mojadomena.pl/images/audi.png',
	'name' => 'Audi',
'image_base64' => base64_encode(file_get_contents('http://mojadomena.pl/images/audi.png'))
);

?>

Gdy zapiszemy wprowadzone zmiany, a plik wyślemy na serwer to w nowym polu o nazwie image_base64 pojawią się różne „krzaki” które będą odpowiadały za dane naszego obrazka.

Teraz zajmiemy się odbiorem danych z serwera. W metodzie z poprzedniego wpisu dodajemy tylko nową zmienną typu string i to do niej przypisujemy cały ciąg znaków z pola image_base64.  W poniższym kodzie ta zmienna będzie nazywała się imageBase64 i jest zwykłą zmienną tekstową. Podajemy ją jako argument base64Encoded w NSData, bez żadnych dodatkowych opcji.

Następnie tworzymy UIImage, któremu ustawiamy parametr data, a na samym końcu stałą (może być też jako zmienna) przypisujemy do UIImageView w opcji image. Całość sprowadza się do dwóch linijek kodu po stronie języka SWIFT.

let imageData = NSData(base64Encoded: imagesBase64, options:[])
let image = UIImage(data: imageData as! Data)
cell.brandImage.image = image // przykład przypisania obrazka do UIImageView

Gdy całość mamy już zakodowaną zarówno po stronie serwera jak i aplikacji, uruchamiamy emulator i testujemy czy wszystkie obrazki zostały pobrane. Zaletami takie rozwiązania jest pobranie wszystkich obrazów na samym początku uruchamiania aplikacji, przez co wysyłamy tylko jedno zapytanie do serwera i nie ma potrzeby czekania na pobranie obraza już w trakcie działania aplikacji. Wadami natomiast może być to że jeżeli obrazki będą zbyt duże to nie opłacalne będzie czekanie i ładowanie wszystkich od razu, wtedy lepiej pobierać pojedynczo lub wykorzystać wątki.

Jeżeli obrazki poprawnie się wyświetlają to możemy zastąpić kod z poprzedniego wpisu na ten z wykorzystaniem base64. Zmiany zapisujemy i commitujemy na serwer.

Dodaj komentarz