Generátor náhodných avatarů 2

JavaScript Základní konstrukce Zdrojákoviště 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

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 Náhodný avatar Náhodný avatar

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ženo 72x (75.06 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Michal Žůrek (misaz)
Avatar
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.

Jak se ti líbí článek?
Celkem (7 hlasů) :
4.285714.285714.285714.28571 4.28571


 



 

 

Komentáře

Avatar
Michal Žůrek (misaz):

Btw. Zkoušel někdo jestli Chrome i na vašem PC hodí tu chybu?

Odpovědět  -1 2.3.2015 20:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Mně jich Chrome vygeneruje max. 53 a Firefox negeneruje vůbec

Odpovědět 2.3.2015 22:00
Zase jsem o něco chytřejší
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Marek Z.:

Pěkné, jenom se chci zeptat, nedá mě to. Ta červeno, bílá, mřížkovaná pusa demonstruje úsměv či rovnátka? :D

Odpovědět 2.3.2015 22:30
Chybami se člověk učí, běžte se učit jinam!
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

Firefox vyletí na generování SVG.

Odpovědět  -1 2.3.2015 22:43
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Marek Z.
Michal Žůrek (misaz):

To je alternativa na "roboti usmev" z verze 1.0.

Odpovědět  +1 2.3.2015 22:44
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.