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