Anpassen von Bildern in HTML

Question

Ich muss eine Website machen, die Sie benutzerdefinierte Schuhe kaufen können. Eines der Features ist, dass Sie eine Seite mit einem Paar Schuhe sehen, dann können Sie "Aufkleber" auswählen, um die Schuhe und die Farbe dieser Aufkleber anzuziehen. Diese können von einer Platte neben den Schuhen ausgewählt werden.

Ich dachte an eine Art und Weise, wie dies zu tun, Meine Idee: Anzeige ein Bild des Paares von Schuhen, auf , das Bild, das ich zwei kleine img-Tags platzieren (die die Aufkleber darstellen), wenn Der Benutzer klickt auf eine Art Aufkleber Ich fülle den Img-Tag mit diesem Aufkleber. Wenn der Benutzer eine Farbe auswählt, ersetze ich das Bild in img-tag durch ein Aufkleberbild mit der gewählten Farbe.

Dies würde aber braucht absolute Positionierung (nicht ansprechbar?) Und eine Menge von Bild-Kombinationen (alle Aufkleber alle Farben haben) ...

Also, was den besten Weg wäre, es zu tun? Ich glaube nicht, dass es eine Art Plugin-Sache dafür gibt?

Answer 1

Sie können die absolute Position reaktionsfähig machen, indem Sie Prozente oder vh/vw verwenden, obwohl Sie Canvas verwenden können, um Ihre Schuhe und Aufkleber in einem einzigen Tag zu rendern.

Und zum Einfärben von Aufklebern ist es möglich, SVG zu verwenden. Sie können SVG-Farbbreiten-JavaScript ohne weitere Uploads ändern. Aber für komplizierte Bilder ist es nicht sehr nützlich.