Twee Afbeeldingen en een API: Alles wat We Nodig hebben om Opnieuw Producten

0
12

Onlangs heb ik een oplossing gevonden dynamische update van de kleur van een product afbeelding. Dus met slechts één <img> van een product, kunnen we inkleuren met het op verschillende manieren te tonen verschillende kleur opties. We hebben zelfs een mooie SVG-of CSS om het gedaan te krijgen!

We worden met behulp van een foto-editor (bijvoorbeeld Photoshop of een Schets) en de afbeelding transformatie service imgix. (Dit is geen gesponsorde post en er is geen aansluiting hier — het is gewoon een techniek die ik wil delen.)

Zie de Pen
Dynamische Auto kleur Der Dooley (@ddools)
op CodePen.

Ik werk met een travel software bedrijf genaamd CarTrawler op het engineering team, en ik ben onlangs begonnen met een project voor een vernieuwing van onze auto afbeeldingen bibliotheek die we gebruiken voor de weergave van autoverhuur zoekresultaten. Ik wilde deze gelegenheid om dynamisch gekleurde auto ‘ s.

Wij kunnen soms maximaal 200 verschillende auto ‘ s tegelijk, dus snelheid en prestatie-eisen. We hebben ook vijf verschillende producten in unieke code bases, dus het vermijden van over-engineering is essentieel voor het succes ervan.

Ik wilde in staat zijn om dynamisch wijzigen van de kleur van elk van deze auto ‘ s zonder extra front-end wijzigingen aan in de code.

Stap 1: De Basis Laag

Ik ben met behulp van auto ‘ s hier, maar deze techniek kan worden toegepast op elk product. Eerst moeten we een base layer. Dit is de default layer we zouden het scherm zonder enige kleur en het moet er goed uitzien op haar eigen.

Stap 2: De Verflaag

Daarna maken we een verflaag die dezelfde afmetingen heeft als de basislaag, maar bevat alleen de gebieden waar de kleuren moeten dynamisch wijzigen.

Een lichte kleur is de sleutel voor de verflaag. Met behulp van wit of een lichte tint grijs geeft ons een groot voordeel, want we zijn uiteindelijk “mengen” dit beeld met kleur. Iets donkerder of in een verschillende tint zou het moeilijk maken om een mix van deze kleuren met andere kleuren.

Stap 3: Gebruik van de API imgix

Dit is waar de dingen interessant. Ik ga leverage meerdere parameters van de imgix API. Laten we het toepassen van een zwarte naar onze verf laag.

(Herkomst-URL)

We veranderd de kleur door het toepassen van een standaard zwarte hex-waarde van #000000.

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

Als u heeft gemerkt is de URL van de afbeelding hierboven, u vraagt zich misschien af: Wat zijn al die parameters? De imgix API-docs veel informatie, dus geen noodzaak om te gaan in meer detail hier. Maar ik zal het uitleggen van de parameters die ik heb gebruikt.

  • w. De breedte wil ik de afbeelding
  • bri. Hiermee past u het niveau voor de helderheid
  • con. Past de hoeveelheid contrast
  • zwart-wit. De dynamische hex kleur

Omdat wij het gaan om het stapelen van onze lagen via imgix moeten we coderen onze verflaag. Dat betekent dat vervanging van een deel van de tekens in de URL gecodeerd met waarden — zoals we zouden doen als we waren gebruikt inline SVG-die als achtergrondafbeelding in de CSS.

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

Stap 4: Stapel de Lagen

We gaan nu gebruik imgix watermerk parameter stack de verf laag op de top van onze base-layer.

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

Laten we kijken naar de parameters die worden gebruikt:

  • w. Dit is de breedte van de afbeelding en het moeten identiek zijn voor een van beide lagen.
  • mark-lijn. Deze centra de verf laag op de top van de basislaag.
  • mark. Dit is waar de gecodeerde verflaag gaat.

In het eind, krijgt u één URL die zal lijken op iets als dit:

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

Dat geeft de auto in het zwart:

(Herkomst-URL)

Nu hebben we een URL, kunnen we in principe wisselen van de zwarte hex-waarde met een andere kleuren die we willen. Laten we proberen blauw!

(Herkomst-URL)

Of groen!

(Herkomst-URL)

Waarom niet rood?

(Herkomst-URL)

Dat is het! Er zijn zeker andere manieren om hetzelfde te bereiken, maar dit lijkt zo eenvoudig dat het de moeite waard te delen. Er was geen behoefte code een hoop extra functionaliteit. Geen complexe bibliotheken te beheren of te stoeien. Alles wat we nodig hebben is een paar afbeeldingen die een online tool stapeling en mix voor ons. Lijkt me een vrij redelijke oplossing!