JS Konfigurator

  • Guten Tag zusammen.

    Schön, das es noch ein Forum gibt, indem wirklich noch gesprochen wird.


    So, ich bin kein wirklicher Anfänger, jedoch auch kein 100% Pro Entwickler. Es reicht normalerweise für das meiste.

    Ich habe mich vor einer ganzen weile mal daran versucht, einen Konfigurator zu schreiben.

    Soweit funktioniert das Teil auch. Allerdings, möchte ich dem Benutzer die Möglichkeit geben, eine Bilddatei hochzuladen um diese dann weiterverwenden zu können.

    Im aktuellen Projekt, soll das hochgeladene Bild auf einen bestimmten Bereich eines vorhandenen gelegt werden. Das hochgeladene Bild, sollte verschiebbar bleiben.

    Wenn der Nutzer dann mit dem Ergebnis zufrieden ist, kann er auf einen Button klicken und die Konfiguration wird dann an eine Email übergeben. In der der Dateiname des hochgeladenen Bildes sowie die Positionierung angegeben ist.


    Die größten Probleme bereitet mir gerade noch der Upload, das abspeichern und das einfügen auf dem neuen Bild.


    Ich hatte sogar mal einen professionellen Programmierer gefragt wie das gehen könnte. Allerdings, hat der das auch nie hinbekommen.


    Ein gutes Beispiel für diese Art Konfigurator ist:


    Shoemonkeys


    Wobei mir das Teil einfach viel zu aufgeblasen ist.


    Wäre cool wenn mir jemand behilflich sein könnte. Ich knabber nun schon sehr lange an diesem Problem und habe es über die Zeit schon ein paar mal einfach bleiben lassen.


    Wenn das Problem gelöst wird, wäre ich sogar bereit etwas dafür springen zu lassen!

  • Hey,


    kurz zur Anmerkung: Ich weiß bisher nicht wie dies erstellt werden kann.


    Trotzdem interessiert es mich sehr.


    Bei Shoemonkeys siehst du, dass nur bestimmte Flächen auf dem Schuh dafür aktiviert sind. Wird das Bild außerhalb dieser Fläche platziert wird es auch nicht angezeigt. Dazu haben sie bestimmt eine Art Koordinatensystem dort eingebaut, damit sie genau wissen wo das Bild platziert werden soll/darf.


    Der angezeigte Schuh ist ein SVG Bild und besteht aus mehreren einzelnen Bildern. Villt. hat SVG dort speziell solch eine Funktion mit der ein Bild auf ein anderes gelegt werden kann? Da gibt es ja die Pfade über welche man dann die Koordinaten ablesen kann.


    Villt wird das importierte Bild als SVG umgewandelt und dann auf das andere SVG Bild draufgelegt. Dann kann mittels Drag & Drop es platziert werden. Beim Platzieren ändern sich dann die Koordination des SVG Bildes. Diese kannst du dann auslesen.


    Ich weiß nicht ob das stimmt. Kann ich mir aber gut vorstellen.

  • MIt SVG hab ich noch nie gearbeitet. Ich habe das allerdings auch gesehen. Allerdings hab ich keine Ahnung wie das mit den SVG funktioniert.

    Ich habe früher mal so etwas entwickelt, wo man einzelne Bereiche eines Bildes umfärben kann:

    https://ulrichbangert.de/div/w…nvas_colorize_roof_5.html

    Der TO schreibt jedoch:

    Also scheint sein Plan ein anderer zu sein.

    Das finde ich sehr interesant. Wenn das jetzt auch statt mit Farben mit Bildern funtioniert.... Bin ich nach Jahren endlich einen Schritt weiter.



    Ich habe das ganze Ding mal hochgeladen. Ihr könnt es euch hier ansehen.....


    Projekt Konfigurator


    Urspünglich war das Ding mal für Shirts und Handycover gedacht. Mittlerweile soll das zwar noch für Shirts werden, jedoch auch für schuhe

  • Jetzt wird das Ganze schon klarer: Du möchtest, dass der Benutzer ein Motiv hochladen kann und dann auf dem T-Shirt positionieren. Die Positionierung hast Du ja schon, fehlt nur noch das Laden aus dem Dateisystem des Benutzers und das Hochladen. Und u. U. das Einrichten der Größe, weil die Abmessungen der Benutzerbilder ja sehr unterschiedlich sein können.

  • richtig.

    ich lege im script einen bedruckbaren bereich fest. hier hinein soll das bild das der nutzer hochlädt geladen werden.

    danach soll der nutzer in der lage sein, dieses bild noch etwas zu schieben, bis er den ausschnitt hat, den er schön findet.

    anschließend, soll das ganze mit drücken auf add to bag übergeben werden. an was genau, weiß ich noch nicht. zum testen wohl erst mal nur an eine email

  • Bild aus dem Dateisystem laden:

    Bilddatei hochladen:

    Wie Du siehst, jeweils nur wenige Zeilen. Das brauchst Du nur zu kombinieren und das Verschieben hinzuzufügen.

  • Also meins, sah mal so aus. Habs nie zum laufen gebracht. mal sehen wie deins klappt. Danke dir

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!