Avatar selbst erstellen mit html

[Knaus]

Hallo,

wie wäre die beste herangehensweise an folgendes Projekt: Zuerst: Das Projekt ist nur privat. Es dient Lernzwecken.

Ich möchte selbst einen Avatar gestalten. Dazu würde ich einfach in Photoshop einen Kopf gestalten, verschiedene Augen, verschiedene Augenbrauen, verschiedene Nasen, verschiedene Ohren und ein paar verschiedene Münder.

So jetzt soll man daraus einen Avatar sich zusammenklicken.

Theoretisch könnte ich das ganze mit javascript umsetzen. Theoretisch auch mit java. Am Ende soll ja einfach eine jpg Grafik rauskommen. Von der Theorie her ist es ja nicht schwer. Das Gesicht ist eine Ebene. Die Augen werden einfach auf das Gesicht gesetzt. Sowas ist ja sogar mit CSS möglich.

Was wäre hier eine geeignete Herangehensweise? Meiner Meinung nach html, css und javascript.

Wie gesagt ich suche nichts vorgefertigtes. Es dient nur zu Übungszwecken.

[molily]

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

[Knaus]

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!

Hallo Matthias,

vermutlich hast du Recht. Wie sagte schon Alexander der Große:  "Es gibt keine anderen Welten mehr zu erobern!" - Letzte Worte, 10. Juni 323 v.Chr.
Das wäre mein Ziel in Bezug auf html etc. Man sollte vielleicht das Rad nicht neu erfinden. Natürlich ist es spannend selbst etwas zu lernen durch Übung. Aber bis ich obigen Spruch sagen kann werden wohl noch Jahre vergehen.

[misterunknown]

Moin,

Spontan würde mir http://fabricjs.com/ als Bibliothek einfallen.

Eventuell wäre auch EaseJS etwas für den TO. Dort gibt es beispielsweise auch eine Drag and Drop Demo.

Grüße Marco

[Gunnar Bittersmann]

@@molily:

nuqneH

JavaScript ist hier die Technik der Wahl. Das »Zusammenklicken« kann über HTML- oder SVG-Elemente passieren,

HTML-Elemente?

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.

Wenn man sich auf SVG-Elemente beschränkt, kann am Ende auch ein SVG-DOM rauspurzeln, aus dem man mit JS auch SVG-XML erstellen können sollte. Dann braucht man kein canvas.

Qapla'