Zwei Bilder und eine API: Alles, was Wir Brauchen für Umfärben der Produkte

0
12

Vor kurzem habe ich eine Lösung gefunden, um dynamisch zu aktualisieren, die Farbe jedes Produkt Bild. Also mit nur einem <img> – von einem Produkt, können wir Kolorieren Sie Sie auf unterschiedliche Weise zu zeigen, anderen Farbe-Optionen. Wir brauchen nicht einmal Lust SVG oder CSS, um es getan!

Wir werden mit einem Bildbearbeitungsprogramm (z.B. Photoshop-oder Sketch) und die Bild-transformation service imgix. (Dies ist nicht ein sponsored post und es gibt keine Zugehörigkeit hier — es ist nur eine Technik, die ich freigeben möchten.)

Siehe Stift
Dynamik Auto Farbe von Der Dooley (@ddools)
auf CodePen.

Ich arbeite mit einem Reise-software-Unternehmen namens CarTrawler über die engineering-team und ich haben kürzlich unternahm ein Projekt den Umbau unserer Auto Bilder-Bibliothek, die wir verwenden, um die Anzeige Mietwagen-Suche Ergebnisse. Ich wollte diese Gelegenheit nutzen, um dynamisch farbige Autos.

Wir können laden manchmal bis zu 200 verschiedene Autos zur gleichen Zeit, also Geschwindigkeit und Leistung sind wesentliche Voraussetzungen. Wir haben auch fünf verschiedene Produkte, die über einzigartige code Basen, also die Vermeidung von over-engineering ist entscheidend für den Erfolg.

Ich wollte in der Lage sein, dynamisch ändern die Farbe von jedem dieser Autos, ohne zusätzliche front-end-änderungen im code.

Schritt 1: Der Base-Layer

Ich bin mit Fotos von Autos hier, aber diese Technik angewandt werden könnte, um jedes Produkt. Zunächst müssen wir eine Basis-Schicht. Dies ist die Standard-Ebene würden wir die Anzeige ohne Farbe und es sollte gut Aussehen auf seine eigenen.

Schritt 2: Die Farb-Layer

Als Nächstes erstellen wir einen Farb-layer , der die gleichen Abmessungen wie die Basis-Schicht, enthält aber nur die Bereiche, in denen die Farben ändern sich dynamisch.

Eine helle Farbe ist der Schlüssel für den Farb-layer. Mit weiß oder einem hellen Grauton gibt uns ein großer Vorteil, denn wir sind schließlich “blending” dieses Bild mit Farbe. Etwas dunkler oder in einem anderen Farbton würde machen es schwer zu mischen, diese Grundfarbe mit anderen Farben.

Schritt 3: Verwendung der API imgix

Dies ist, wo die Dinge interessant. Ich werde das zu nutzen, mehrere Parameter aus der imgix API. Wenden Sie eine schwarze, um unsere Farb-layer.

(Quelle URL)

Wir ändern die Farbe, indem die Anwendung eines standard-black-hex-Wert #000000.

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

Wenn Sie bemerkt die URL von dem Bild oben, werden Sie sich vielleicht Fragen: Was zum Teufel sind all diese Parameter? Die imgix API-docs haben eine Menge toller Informationen, so dass keine Notwendigkeit, um näher ins detail gehen hier. Aber ich werde erklären, die Parameter, die ich verwendet habe.

  • w. Die Breite will ich das Bild
  • bri. Passt die Helligkeit
  • con. Passt den Kontrast
  • Monochrom. Die dynamische hex-Farbe

Da werden wir stapeln unsere Schichten über imgix müssen wir Kodieren unsere Farb-layer. Das bedeutet, ersetzen einige der Zeichen in der URL mit kodierten Werten — wie würden wir tun, wenn wir die Verwendung von inline-SVG als background-image in CSS.

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

Schritt 4: Stapeln Sie die Ebenen

Jetzt gehen wir imgix der watermark-parameter auf stack die Lack-Schicht auf der Oberseite unserer base layer.

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

Schauen wir uns die Parameter verwendet werden:

  • w. Dies ist die Breite des Bildes und es muss identisch für beide Ebenen.
  • mark auszurichten. Diese Zentren die Farbe Schicht auf der Oberseite der Basisschicht.
  • mark. Dies ist, wo die codierten Farb-layer geht.

Am Ende erhalten Sie eine einzelne URL, die etwas Aussehen wie dieses:

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

Das gibt das Auto in schwarz:

(Quelle URL)

Jetzt haben wir eine URL, können wir im Grunde tauschen Sie die schwarze hex-Wert mit anderen Farben, die wir wollen. Let ‘ s try blue!

(Quelle URL)

Oder grün!

(Quelle URL)

Warum nicht rot?

(Quelle URL)

Das ist es! Es gibt sicherlich auch andere Möglichkeiten, um das gleiche erreichen, aber dies scheint so einfach, dass es sich lohnt, zu teilen. Es Bestand keine Notwendigkeit, code, eine Reihe von zusätzlichen Funktionen. Keine komplexen Bibliotheken zu verwalten oder zu streiten. Alles, was wir brauchen, ist ein paar Bilder, ein online-tool-stack und Mischung für uns. Scheint wie eine ziemlich vernünftige Lösung!