Två Bilder och en API: Allt Vi Behöver för Effekterna Produkter

0
10

Jag har nyligen hittat en lösning för att dynamiskt uppdatera färg för varje produkt bilden. Så med bara en <img> – av en produkt, kan vi färga den i olika sätt att visa olika färg alternativ. Vi behöver inte ens någon lust SVG och CSS för att få det gjort!

Vi kommer att använda en bild editor (t ex Photoshop eller Skiss) och bilden omvandling service imgix. (Detta är inte ett sponsrat inlägg och det är ingen anknytning här — det är bara en teknik som jag vill dela.)

Se Pennan
Dynamisk Bil färg av Der Dooley (@ddools)
på CodePen.

Jag arbetar med en resa mjukvaruföretag som heter CarTrawler på den tekniska team, och jag har nyligen genomförde ett projekt som en uppiffad vår bil bilder bibliotek som vi använder för att visa biluthyrning sökresultat. Jag ville ta tillfället i akt att presentera dynamiskt färgade bilar.

Ibland kan vi ladda upp till 200 olika bilar på samma gång, så att hastigheten och prestanda är viktiga krav. Vi har också fem olika produkter i hela unik kod grunder, för att undvika över-teknik är avgörande för att nå framgång.

Jag ville ha möjlighet att dynamiskt ändra färg på var och en av dessa bilar utan att behöva extra front-end ändringar i koden.

Steg 1: Underställ

Jag använder bil-bilder här, men den här tekniken skulle kunna tillämpas på varje produkt. Först behöver vi en bas lager. Detta är standard lager vi skulle visa utan någon färg och att det ska se bra ut på egen hand.

Steg 2: Måla Lager

Därefter skapar vi en färgskiktet det är samma mått som bas lager, men endast innehåller de områden där färgerna bör ändras dynamiskt.

En ljus färg är viktig för att färgskiktet. Med hjälp av vit eller en ljus nyans av grått ger oss en stor fördel eftersom vi är i slutändan att “blanda” den här bilden med färg. Något mörkare eller i en annan nyans skulle göra det svårt att blanda denna grundfärg med andra färger.

Steg 3: Använda imgix API

Det är där det blir intressant. Jag kommer att utnyttja flera parametrar från imgix API. Låt oss applicera en svart att våra färgskiktet.

(Källa URL)

Vi ändrade färgen genom att tillämpa en standard svart hex-värdet #000000.

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

Om du inte har märkt URL-adressen till bilden ovan, du kanske undrar: Vad sjutton är alla dessa parametrar? Den imgix API-dokument har en hel del bra information, så du behöver inte gå in mer på detalj här. Men jag kommer att förklara de parametrar som jag använde.

  • w. Den bredd jag vill att bilden ska vara
  • bri. Justerar ljusstyrkenivån
  • con. Justerar mängden kontrast
  • monokrom. Den dynamiska hex färg

Eftersom vi kommer att stapla vårt lager via imgix vi kommer att behöva koda våra färgskiktet. Det innebär att ersätta en del av tecknen i WEBBADRESSEN med kodade värden — som vi skulle göra om vi skulle använda inline SVG bilden som bakgrundsbild i CSS.

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

Steg 4: Stack Lager

Nu kommer vi att använda imgix är vattenstämpel parameter för att stapla måla lager på toppen av våra underställ.

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

Låt oss titta på de parametrar som används:

  • w. Detta är bildens bredd och det måste vara identiska för båda lagren.
  • mark-align. Detta centra måla lager på toppen av underställ.
  • märke. Det är där den kodade måla lager går.

I slutet du kommer att få en URL-adress som kommer att se ut ungefär så här:

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

Som ger bilen i svart:

(Källa URL)

Nu när vi har en URL, vi kan i princip byta ut den svarta hex-värde med andra färger vi vill ha. Låt oss försöka blå!

(Källa URL)

Eller grönt!

(Källa URL)

Varför inte rött?

(Källa URL)

Det är det! Det finns säkert andra sätt att utföra samma sak, men det här verkar så enkelt att det är värt att dela. Det var inte behöver koda en massa extra funktionalitet. Inga komplicerade bibliotek för att hantera eller tvista. Allt vi behöver är ett par bilder som ett online-verktyg kommer stack och blanda för oss. Verkar som en ganska rimlig lösning!