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 RandomAvatarGenerator.min.js. V případě neminimalizované varianty musíte naimportovat kromě samotného scriptu RandomAvatarGenerator.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
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 98x (75.06 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript