Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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 #1 - JavaScript zdrojákoviště - Základní konstrukce jazyka

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:

Náhodný avatar - JavaScript zdrojákoviště - Základní konstrukce jazyka Náhodný avatar - JavaScript zdrojákoviště - Základní konstrukce jazyka Náhodný avatar - JavaScript zdrojákoviště - Základní konstrukce jazyka

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.

 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 97x (75.06 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Všechny články v sekci
JavaScript zdrojákoviště - Základní konstrukce jazyka
Program pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
8 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity