Generátor náhodných avatarov 2

Druhá verzia generátora náhodných avatarov, ktorá je tentoraz napísaná v TypeScriptu a dokáže generovať rôzne veľké obrázky. Export jednotlivých obrázku možno vykonať do bitmapového formátu PNG alebo vektorového SVG.

Implementácia

Abyte mohli na stránke generovať avatary, musíte naimportovať skripty buď všetky neminimalizované alebo iba RandomAvatarGe­nerator.min.js. V prípade neminimalizované varianty musíte naimportovať okrem samotného scriptu RandomAvatarGe­nerator.js aj misaz.svg.js.

Použitie

ako základ generátora poslúži objekt tvár.

var o = new Oblicej();

Tento objekt uchováva generovaný tvár. Pred akýmkoľvek vykreslením sa musí tvár vygenerovať, obrázok môžete nechať vykresľovať treba 1000000 × (V Google Chrome to nepôjde, ale o tom si povieme neskôr ) A nezavoláme ak medzi tým generovanie, dostaneme 1000000 rovnakých maximálne rozlične zväčšených / zmenšených obrázkov.

Pre generovanie slúži metóda Generuj (), ktorá neprijíma žiadne parametre.

o.Generuj();

Vykresľovanie

Html obrázok

HTML obrázok (HTMLImageElement) získame metódou Nakresli (). Tá ako parameter prijíma zväčšenie, čo sa udáva ako násobok 128.

Napr. ak chceme obrázok veľký 512px, obrázok nám vráti volanie metódy:

var img = o.Nakresli(4);

PNG

obrázok PNG môžeme získať metódou Base64 (). Ako názov napovedá, obrázok bude vo formáte Base64. Metóda opäť ako jediný parameter prijíma zväčšenia (rovnako ako Nakresli ()).

var base64 = o.Base64(4);

SVG

Vektorový obrázok získame metódou SVG (), ktorá ako parameter prijíma základné zväčšenie tak ako Base64 () a Nakresli (). Metóda vráti objekt SVGSVGElement s obrázkom.

var svg = o.Svg(4);

Príklady

Ako najbežnejší príklad využitia je príklad 1 (Example 1 v priečinku so zdrojovým kódom). Tam si môžete rôzne nastavovať zväčšenie obrázku, generovať nové a exportovať ich.

Trochu zaujímavejšie je príklad 2, ktorý ukladá užívateľom zadaný počet obrázkov do zazipované zložky ako vo formáte PNG, tak SVG.

Známe chyby

Bug # 1 (Google Chrome) - pád aplikácie. Ak v Google Chrome chceme vygenerovať až moc veľký obrázok alebo ich chceme veľa, aplikácia spadne. Môžete si v druhom príklade vyskúšať vygenerovať 250 obrázkov. pravdepodobne uvidíte

Bug # 2 (Firefox) - Neschopnosť generovanie SVG. Vo Firefoxe nemožno generovať SVG, majú tam nejaký bug s načítaním jedného SVG Attribut.

Ak objavíte nejaký ďalší bug, hláste ho v komentároch nižšie.

Príklady generovaných obrázkov

Výsledné obrázky vyzerajú takto:

V albume môžete vidieť ďalšie ukážky vygenerovaných obrázkov PNG vo veľkosti 640> × 640 (zoom = 5).

Galéria