molily: Avatar selbst erstellen mit html

Beitrag lesen

Hallo,

JavaScript ist hier die Technik der Wahl. Das »Zusammenklicken« kann über HTML- oder SVG-Elemente passieren, die mit CSS positioniert werden (z.B. Drag’n’Drop). JavaScript bringt die Interaktivität hinein.

Am Ende purzelt eine Datenstruktur heraus, z.B. eine Liste von Bildern mit X/Y-Koordinaten. Schwerig wird es beim Generieren eines Bildes. Das ist in JavaScript nur möglich, indem man einen HTML5-Canvas per JavaScript bezeichet und dann den Inhalt als Data-URL ausliest (toDataURL).

Ob man deswegen die ganze Anwendung in Canvas programmieren will, oder erst am Ende zur Grafik-Generierung die Bilder auf einen Canvas zeichnet, müsste man prüfen. Canvas ist nämlich nur eine »dumme« Rastergrafik-Zeichenfläche und es gibt im Gegensatz zum DOM keine Objekte, die z.B. auf Mausinteraktion reagieren müssen. Diese Abstraktion muss man sich bei Canvas selber schreiben. Spontan würde mir http://fabricjs.com/ als Bibliothek einfallen.

Das ganze wird schon etwas aufwändiger, daher würde ich nicht raten, *alles* von Hand zu machen, sondern zumindest geeignete JavaScript-Bibliotheken zu verwenden. Viel Erfolg jedenfalls!

Grüße
Mathias