Zwei Bilder und eine API: Alles, was wir für die Neufärbung von Produkten brauchen

Ich habe kürzlich eine Lösung gefunden, um die Farbe jedes Produktbildes dynamisch zu aktualisieren. So können wir mit nur einem <img> eines Produkts dieses auf verschiedene Weisen einfärben, um verschiedene Farboptionen anzuzeigen. Wir brauchen dafür nicht einmal ausgefallenes SVG oder CSS!

Wir werden einen Bildeditor (z. B. Photoshop oder Sketch) und den Bildtransformation-Service imgix verwenden. (Dies ist kein gesponserter Beitrag und es besteht keine Zugehörigkeit – es ist nur eine Technik, die ich teilen möchte.)

Siehe den Pen
Dynamische Autofarbe von Der Dooley (@ddools)
auf CodePen.

Ich arbeite in der Ingenieurabteilung eines Reise-Softwareunternehmens namens CarTrawler und habe kürzlich ein Projekt zur Überarbeitung unserer Autowerkbibliothek übernommen, die wir für die Anzeige von Mietwagenergebnissen verwenden. Ich wollte diese Gelegenheit nutzen, um dynamisch gefärbte Autos einzuführen.

Wir laden manchmal bis zu 200 verschiedene Autos gleichzeitig, daher sind Geschwindigkeit und Leistung Schlüsselanforderungen. Wir haben auch fünf verschiedene Produkte in einzigartigen Codebasen, daher ist die Vermeidung von Over-Engineering für den Erfolg entscheidend.

Ich wollte in der Lage sein, die Farbe jedes dieser Autos dynamisch zu ändern, ohne zusätzliche Frontend-Änderungen am Code vornehmen zu müssen.

Schritt 1: Die Basisschicht

Ich verwende hier Autofotos, aber diese Technik könnte auf jedes Produkt angewendet werden. Zuerst brauchen wir eine Basisschicht. Dies ist die Standardebene, die wir ohne Farbe anzeigen würden und die für sich allein gut aussehen sollte.

Schritt 2: Die Farbschicht

Als nächstes erstellen wir eine Farbschicht, die die gleichen Abmessungen wie die Basisschicht hat, aber nur die Bereiche enthält, in denen sich die Farben dynamisch ändern sollen.

Eine helle Farbe ist entscheidend für die Farbschicht. Weiß oder ein heller Grauton verschafft uns einen großen Vorteil, da wir dieses Bild letztendlich mit Farbe „mischen“. Alles Dunklere oder in einem anderen Farbton würde es schwierig machen, diese Grundfarbe mit anderen Farben zu mischen.

Schritt 3: Verwendung der imgix API

Hier wird es interessant. Ich werde mehrere Parameter der imgix API nutzen. Lassen Sie uns unserer Farbschicht ein Schwarz hinzufügen.

Wir haben die Farbe geändert, indem wir einen Standard-Hex-Wert für Schwarz von #000000 verwendet haben.

https://ddools.imgix.net/cars/paint.png?w=600&bri=-18&con=26&monochrome=000000

Wenn Ihnen die URL des obigen Bildes aufgefallen ist, fragen Sie sich vielleicht: Was um alles in der Welt bedeuten all diese Parameter? Die imgix API-Dokumentation enthält viele großartige Informationen, daher muss ich hier nicht ins Detail gehen. Aber ich werde die von mir verwendeten Parameter erklären.

• w. Die Breite, die ich für das Bild wünsche
• bri. Passt den Helligkeitsgrad an
• con. Passt die Kontrastmenge an
• monochrome. Die dynamische Hex-Farbe

Da wir unsere Ebenen über imgix stapeln werden, müssen wir unsere Farbschicht *kodieren*. Das bedeutet, einige Zeichen in der URL durch kodierte Werte zu ersetzen – so wie wir es tun würden, wenn wir Inline-SVG als Hintergrundbild in CSS verwenden würden.

https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000

Schritt 4: Stapeln der Ebenen

Nun verwenden wir den Wasserzeichen-Parameter von imgix, um die Farbschicht über unsere Basisschicht zu legen.

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=[PAINTLAYER]

Werfen wir einen Blick auf die verwendeten Parameter

• w. Dies ist die Bildbreite und muss für beide Ebenen identisch sein.
• mark-align. Dies zentriert die Farbschicht über der Basisschicht.
• mark. Hier kommt die kodierte Farbschicht hin.

Am Ende erhalten Sie eine einzige URL, die ungefähr so aussehen wird

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000

Dies verleiht dem Auto die schwarze Farbe

Da wir nun eine URL haben, können wir einfach den schwarzen Hex-Wert durch jede andere gewünschte Farbe ersetzen. Probieren wir Blau!

Oder Grün!

Warum nicht Rot?

---

Das war's! Es gibt sicherlich andere Wege, dasselbe zu erreichen, aber dies scheint so unkompliziert zu sein, dass es sich lohnt, es zu teilen. Es war keine Notwendigkeit, eine Menge zusätzlicher Funktionalität zu codieren. Keine komplexen Bibliotheken zu verwalten oder zu bändigen. Alles, was wir brauchen, sind ein paar Bilder, die ein Online-Tool für uns stapelt und mischt. Scheint eine ziemlich vernünftige Lösung zu sein!