To Bilder og en API: Alt Vi Trenger for Recoloring Produkter

0
13

Jeg har nylig funnet en løsning for dynamisk oppdatering fargen på bilde av produktet. Så med bare en <img> til et produkt vi kan fargelegge det på forskjellige måter for å vise forskjellige farge valg. Vi trenger ikke engang noen fancy SVG-eller CSS for å få det gjort!

Vi skal bruke et bilderedigeringsprogram (f.eks Photoshop eller Skisse) og bildet transformasjon service imgix. (Dette er ikke et sponset innlegg, og det er ingen tilhørighet her — det er bare en teknikk som jeg ønsker å dele.)

Se Penn
Dynamisk Bil farge ved Der Dooley (@ddools)
på CodePen.

Jeg jobber med en travel software selskap kalt CarTrawler på engineering team, og jeg har nylig gjennomført et prosjekt en revolusjonere vår bil bilder-biblioteket som vi bruker til å vise bilutleie søkeresultater. Jeg ønsket å benytte anledningen til å introdusere dynamisk farget biler.

Vi kan noen ganger legg opp til 200 forskjellige biler på samme tid, så hastigheten og ytelsen er viktige krav. Vi har også fem forskjellige produkter gjennom unik kode baser, slik at du unngår over-engineering er avgjørende for suksess.

Jeg ønsket å være i stand til å dynamisk endre fargen på hvert av disse bilene uten ekstra front-end endringer i koden.

Trinn 1: Base-Lag

Jeg bruker bil bilder her, men denne teknikken kan brukes på alle produkt. Først trenger vi en base laget. Dette er standard lag vi ville vise uten noen farge og det skal se bra ut på sin egen.

Trinn 2: Lag Maling

Neste skaper vi et lag maling som er det samme dimensjoner som base lag, men bare inneholder de områdene der fargene bør endres dynamisk.

En lys farge er nøkkelen for maling lag. Ved bruk av hvit eller lys nyanse av grått, som gir oss en stor fordel fordi vi er til syvende og sist “blande” dette bildet med farge. Noe mørkere eller i en annen nyanse ville gjøre det vanskelig å blande dette grunnfarge med andre farger.

Trinn 3: Bruke den imgix API

Det er der det blir interessant. Jeg kommer til å utnytte flere parametre fra imgix API. La oss bruke et svart til våre malingslaget.

(Kilde URL)

Vi har endret farge ved å bruke en standard svart heksadesimale verdien av #000000.

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

Hvis du lagt merke til den URL-en til bildet ovenfor, du kanskje lurer på: Hva pokker er alle de parametre? Den imgix API docs har mye god informasjon, slik at ingen trenger å gå i større detalj her. Men jeg vil forklare parametere jeg brukte.

  • w. Bredde-jeg vil at bildet skal være
  • bri. Justerer lysstyrken
  • con. Justerer mengden av kontrast
  • svart-hvitt. Den dynamiske hex farge

Fordi vi kommer til å stable våre lag via imgix vi trenger å kode våre malingslaget. Som betyr at det erstatter noen av tegnene i URL-kodet med verdier — som vi ville gjøre hvis vi var med inline SVG som bakgrunnsbilde i CSS.

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

Trinn 4: Stable Lag

Nå er vi kommer til å bruke imgix er vannmerke parameter for å stable maling lag på toppen av vår base lag.

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

La oss se på de parametere som er brukt:

  • w. Dette er bildet bredde, og det må være likt for begge lag.
  • mark-rett. Dette sentre maling lag på toppen av basen lag.
  • mark. Dette er hvor kodet maling lag går.

I slutten, vil du få en enkel NETTADRESSE som vil se ut noe som dette:

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

Det gir bilen i svart:

(Kilde URL)

Nå som vi har en URL, kan vi i utgangspunktet bytte ut den sorte hex-verdi med noen andre farger vi vil ha. La oss prøve blå!

(Kilde URL)

Eller grønn!

(Kilde URL)

Hvorfor ikke rød?

(Kilde URL)

Det er det! Det finnes sikkert andre måter å oppnå det samme, men dette virker så grei som det er verdt å dele. Det ble trenger ikke kode en haug med ekstra funksjonalitet. Ingen kompliserte biblioteker for å administrere eller argumentere. Alt vi trenger er et par bilder som en online verktøy som vil stabel og blanding for oss. Virker som en ganske rimelig løsning!