Peter Širka
Peter Širka

Osobný blog programátora a IT nadšenca.

Vytvorenie prázdneho obrázka v JavaScripte

Vytvorenie prázdneho obrázka v JavaScripte

Pri SPA aplikáciách sa mi často stáva, že potrebujem vygenerovať predvolený obrázok napr. k nejakému produktu, blogu, atď.. Historicky som to riešil tak, že som na mal servery vygenerovaný predvolený obrázok, na ktorý som odkazoval a to len v prípade, že obrázok nebol uploadnutý. Pomocou nižšie uvedenej funkcie vieš ušetriť minimálne jeden request na server a čo je super, ak používaš napr. nejaký rozmer obrázku a responzívnosť, tak nemusíš nastavovať minimálnu šírku a výšku, pretože veľkosť obrázka vygeneruješ podľa svojich potrieb.

Funkcia na vygenerovanie obrázka

Žiadny komplikovaný algoritmus, proste na pozadí sa vytvorí canvas element a jeho obsah sa uloží do base64. Výsledok base64 môžeme priamo vložiť do img.src.

Použitie funkcie