Generátor náhodných avatarů 2

Druhá verze generátoru náhodných avatarů, která je tentokrát napsaná v TypeScriptu a umí generovat různě velké obrázky. Export jednotlivých obrázku lze provést do bitmapového formátu PNG nebo vektorového SVG.

Implementace

Abyte mohli na stránce generovat avatary, musíte naimportovat skripty buď všechny neminimalizované nebo pouze RandomAvatarGe­nerator.min.js. V případě neminimalizované varianty musíte naimportovat kromě samotného scriptu RandomAvatarGe­nerator.js i misaz.svg.js.

Použití

jako základ generátoru poslouží objekt Oblicej.

var o = new Oblicej();

Tento objekt uchovává generovaný obličej. Před jakýmkoliv vykreslením se musí obličej vygenerovat, obrázek můžete nechat vykreslovat třeba 1000000× (V Google Chrome to nepůjde, ale o tom si povíme později ) a nezavoláme-li mezi tím generování, dostaneme 1000000 stejných maximálně různě zvětšených/zmen­šených obrázků.

Pro generování slouží metoda Generuj(), která nepřijímá žádné parametry.

o.Generuj();

Vykreslování

HTML obrázek

HTML obrázek (HTMLImageElement) získáme metodou Nakresli(). Ta jako parametr přijímá zvětšení, což se udává jako násobek 128.

Např. pokud chceme obrázek velký 512px, obrázek nám vrátí volání metody:

var img = o.Nakresli(4);

PNG

obrázek PNG můžeme získat metodou Base64(). Jak název napovídá, obrázek bude ve formátu Base64. Metoda opět jako jediný parametr přijímá zvětšení (stejně jako Nakresli()).

var base64 = o.Base64(4);

SVG

Vektorový obrázek získáme metodou Svg(), která jako parametr přijímá základní zvětšení tak jako Base64() a Nakresli(). Metoda vrátí objekt SVGSVGElement s obrázkem.

var svg = o.Svg(4);

Příklady

Jako nejběžnější příklad využití je příklad 1 (Example 1 ve složce se zdrojovým kódem). Tam si můžete různě nastavovat zvětšení obrázku, generovat nové a exportovat je.

Trochu zajímavější je příklad 2, který ukládá uživatelem zadaný počet obrázků do zazipované složky jak ve formátu PNG, tak SVG.

Známé chyby

Bug #1 (Google Chrome) - pád aplikace. Pokud v Google Chrome chceme vygenerovat až moc velký obrázek nebo jich chceme hodně, aplikace spadne. Můžete si v druhém příkladu vyzkoušet vygenerovat 250 obrázků. Pravděpodobně uvidíte

Bug #2 (Firefox) - Neschopnost generování SVG. Ve FireFoxu nelze generovat SVG, mají tam nějaký bug s načítáním jednoho SVG attributu.

Pokud objevíte nějaký další bug, hlaste ho v komentářích níže.

Příklady generovaných obrázků

Výsledné obrázky vypadají takto:

V albu můžete vidět další ukázky vygenerovaných obrázků PNG ve velikosti 640>×640 (zoom = 5).

Galerie

Program byl vytvořen v roce 2015.