Car Image API

Toepassingen · Autoverhuur

Auto-afbeeldingen voor de vlootpagina's van autoverhuurders

Toon elke huurcategorie op dezelfde manier: één representatief model per categorie, identieke kadrering met trim, padding en fit, één benoemde lakkleur, en URL's die u in de cache opslaat.

Een implementatiegids op basis van het gedocumenteerde gedrag van de API; er wordt geen klant genoemd. Gepubliceerd op .

Het probleem: u huurt een klasse, geen auto

Een huurklant boekt een categorie, een compacte auto, een middelgrote SUV, een minivan, en rijdt weg in de auto uit die categorie die toevallig op het terrein staat. De boekingspagina heeft toch voor elke categorie een afbeelding nodig, en gebruikelijk is één representatief model met de woorden "of vergelijkbaar".

Die afbeeldingen komen meestal van waar ze maar te vinden waren: hier een persfoto, daar een foto van een dealer, verschillende hoeken, verschillende achtergronden, auto's die hun kaart elk anders vullen. Een raster dat zo is samengesteld, ziet er ook samengesteld uit. Wat een vlootpagina nodig heeft, is het tegenovergestelde: elke categorie op dezelfde manier weergegeven, zodat het enige dat van kaart tot kaart verandert de auto is.

Hoe de integratie eruitziet

  • Eén representatief model per klasse, opgeslagen als voertuig-id uit de catalogus, met "of vergelijkbaar" in het label en nooit in de afbeelding.
  • Eén requestvorm voor elke kaart: hetzelfde aanzicht, kader, passing, uitsnede, opvulling, lakkleur, achtergrond en formaat.
  • Hooguit twee afbeeldingen per categorie: de kaart in het raster en de hero-afbeelding op de categoriepagina.
  • Gecachet, omdat het raster voor elke bezoeker hetzelfde is: bestanden op uw CDN, of signed URL's die één keer worden aangemaakt en daarna hergebruikt.

Stap 1: kies per klasse een representatief model, op id

Kies het model waaronder elke klasse wordt verkocht en zoek het huidige modeljaar op. GET /api/v1/vehicles?make=&model= is gratis en openbaar en geeft alle jaren van één model, elk met de stabiele voertuig-id die u opslaat; POST /api/v1/images/resolve doet hetzelfde op basis van een zin als "2026 toyota rav4".

De id van één modeljaar
# one model's years, each with its vehicle id (free, public)
curl -s "https://carimage.dev/api/v1/vehicles?make=toyota&model=rav4" | jq -c '.data.vehicles[] | select(.year == 2026)'
# {"year":2026,"id":"veh_e5w75c93f6cvk"}
fleet.ts
// One representative model per class: its current model year, by catalog id.
// "or similar" lives in the label; the picture never promises the car on the lot.
export const CLASS_IMAGES = {
  compact:        { vehicle: "veh_fy7r2yvwt4p1v", label: "Toyota Corolla or similar" },    // 2026 Toyota Corolla
  "midsize-suv":  { vehicle: "veh_e5w75c93f6cvk", label: "Toyota RAV4 or similar" },       // 2026 Toyota RAV4
  "fullsize-suv": { vehicle: "veh_9mzh9ejqjye43", label: "Chevrolet Tahoe or similar" },   // 2026 Chevrolet Tahoe
  minivan:        { vehicle: "veh_9jck7rrybf35p", label: "Chrysler Pacifica or similar" }, // 2026 Chrysler Pacifica
};

De id's veranderen nooit, dus deze mapping is de enige plek die een wijziging in het wagenpark raakt: als de middenklasse overstapt op een ander model of op het volgende modeljaar, vervangt u één id en volgt elke kaart, hero en e-mail die de mapping leest.

Stap 2: één requestopbouw voor elke categorie

De 9 camerastandpunten zijn voor elk voertuig in de catalogus identiek gekadreerd; daardoor sluit een raster netjes aan. De rest van de kaart bestaat uit een handvol parameters die u één keer vastlegt:

  • view=side voor de kaarten: elke auto kijkt dezelfde kant op, op dezelfde basislijn. Elke hoek aan de linkerkant heeft een -right-tegenhanger (side-right), zodat de kaarten naar de lay-out toe kunnen kijken. De klassepagina gebruikt front-3-4, de hero-hoek.
  • w=640&h=320&fit=contain: precies 640×320 voor elke klasse, met de hele auto in beeld. De headers X-Image-Width en X-Image-Height in de respons bevestigen het canvas.
  • trim=1&padding=6: snijd bij tot de auto voordat deze wordt ingepast, met 6% van de langste zijde als marge, zodat een Corolla en een Tahoe hun kaarten op dezelfde manier vullen in plaats van te zweven in het vierkante bronkader.
  • background=f4f4f4 zet de kaart plat op het eigen grijs van het raster. Laat dit weg om de transparante achtergrond te behouden en de kleur van de kaart erdoorheen te laten komen.
  • format=webp voor opgeslagen bestanden; format=auto op ondertekende URL's, die aan elke browser WebP of PNG leveren.
Een kaart en een hero-afbeelding voor één klasse
# the class card: the same box, view, crop, paint and backdrop for every class
curl --fail-with-body -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  "https://carimage.dev/api/v1/images/car?vehicle=veh_e5w75c93f6cvk&view=side&color=white&w=640&h=320&fit=contain&trim=1&padding=6&background=f4f4f4&format=webp" \
  -o midsize-suv-card.webp

# the class page's hero: the three-quarter view, the full width the API delivers
curl --fail-with-body -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  "https://carimage.dev/api/v1/images/car?vehicle=veh_e5w75c93f6cvk&view=front-3-4&color=white&w=1024&format=webp" \
  -o midsize-suv-hero.webp

Stap 3: één benoemde lakkleur voor het hele raster

De 15 presets zijn benoemde lakkleuren: white, black, gray, silver, blue, red, green, brown, beige, tan, orange, yellow, gold, burgundy, purple. De standaard is silver, en grey wordt gelezen als gray. Kies er één voor elke klasse, zodat de kaarten als een set ogen; hierboven ziet u white. Elke preset behoudt zijn eigen lakstaal in plaats van de CSS-kleur met dezelfde naam (red is #b3151b), en elke lakkleur, ook een hexwaarde, is een herkleuring van één voorbereid aanzicht, dus elke lakkleur is één voertuigafbeelding.

Stap 4: cache de bestanden of de URL's

Het klasseraster is voor elke bezoeker hetzelfde, dus het zou per bezoek vrijwel niets moeten kosten. Dat kan op twee manieren:

  • Sla de bestanden op. Haal elke kaart- en hero-afbeelding één keer op met GET /api/v1/images/car en lever ze vanaf uw CDN zoals elk ander asset; een betaald plan staat kopieën op uw eigen servers toe om uw product te bedienen zolang het actief is (verwijder ze binnen 30 dagen na afloop, of koop een Image Pack om een set blijvend te bewaren). Bewaar de ETag van elk bestand: een nachtelijke hercontrole met If-None-Match krijgt 304 als antwoord en kost niets. Voor de vloot hierboven is dat 8 voertuigafbeeldingen van de maand, zo vaak hergebruikt als nodig.
  • Of maak ondertekende URL’s één keer aan en hergebruik ze. POST /api/v1/image-urls accepteert tot 50 afbeeldingen per aanroep en retourneert URL’s zonder sleutel die tot 7 dagen geldig blijven. Een URL met onbeperkt gebruik is binnen zijn looptijd openbaar cachebaar, dus wanneer elke bezoeker dezelfde URL laadt, komen herhalingen gratis van het CDN. Voeg renew: true toe en een opgeslagen URL blijft ook na zijn looptijd werken; een verlenging telt de afbeelding één keer in de maand waarin die valt, en niets extra als de afbeelding die maand al was geteld, zodat de vloot hierboven op maximaal 8 voertuigafbeeldingen per maand blijft.

Beperk de sleutel waarmee de URL's worden aangemaakt tot uw boekingsdomein op het dashboard, dan geeft een URL die naar een andere site is gekopieerd 403 terug.

De URL's van het raster, één keer aangemaakt, met de TypeScript SDK
import { CarImageClient, type ImageParams } from "@meterapp/car-image-sdk";
import { CLASS_IMAGES } from "./fleet";

const client = new CarImageClient({ apiKey: process.env.CAR_IMAGE_API_KEY });

// Framed once, for every class.
const card = (vehicle: string): ImageParams => ({
  vehicle, view: "side", color: "white", width: 640, height: 320,
  fit: "contain", trim: true, padding: 6, background: "#f4f4f4", format: "auto",
});
const hero = (vehicle: string): ImageParams => ({ vehicle, view: "front-3-4", color: "white", width: 1024, format: "auto" });

// Every visitor sees the same grid: mint the URLs once and serve the stored ones.
// renew keeps each URL working past its 7-day lifetime, one credit per image
// for each further week in which it is loaded.
const classes = Object.entries(CLASS_IMAGES);
const { data } = await client.createImageUrls(
  classes.flatMap(([, entry]) => [card(entry.vehicle), hero(entry.vehicle)]),
  { ttlSeconds: 604800, renew: true, idempotencyKey: "class-grid-2026-10" }
);
await saveClassImages(
  classes.map(([key], index) => ({ key, card: data[2 * index].url, hero: data[2 * index + 1].url, renewsUntil: data[2 * index].renews_until }))
);

Stap 5: de boekingsbevestiging

De bevestigingsmail toont de geboekte categorie, en e-mails worden geopend wanneer de huurder eraan toekomt. Maak de afbeelding aan als een zich vernieuwende URL: ttl_seconds op het maximum van 7 dagen, renew: true en renew_days tot na de inleverdatum. Weken waarin niemand de e-mail opent kosten niets, en na de huurperiode wordt de URL niet meer vernieuwd. Een Idempotency-Key per boeking zorgt ervoor dat een opnieuw geprobeerde verzending de eerste URL teruggeeft in plaats van een tweede aan te maken, en door de URL bij de boeking op te slaan kan elke latere herverzending hem hergebruiken. Onze eigen lifecycle-e-mails werken zo; het verhaal over e-mail beschrijft het mechanisme en de HTML.

Een zichzelf vernieuwende URL voor één bevestiging
// The booking confirmation: opened today, again at the counter, maybe never.
const { data: [classImage] } = await client.createImageUrls(card(booking.classVehicle), {
  ttlSeconds: 604800,
  renew: true,
  // A week past the return date, and no renewals after it (365 days at most).
  renewDays: Math.min(daysUntil(booking.returnDate) + 7, 365),
  // A retried send replays the first URL instead of minting a second one.
  idempotencyKey: `booking:${booking.id}:class`,
});
booking.classImageUrl = classImage.url; // later resends reuse it

CLI, SDK en MCP

  • CLI: npx @meterapp/car-image get --vehicle veh_… --view side --width 640 --height 320 --fit contain --trim --padding 6 --out card.webp schrijft een kaart naar een bestand; car-image url --batch classes.json --renew maakt een reeks URL's aan.
  • SDK: client.vehicles({ make, model }) voor de id's, client.getImage(…) voor bestanden, client.createImageUrls(…) voor URL's.
  • MCP: met resolve_vehicle en create_car_image_urls kan een assistent een categoriekaart opstellen op basis van "middelgrote SUV, RAV4 of vergelijkbaar". De installatie staat op de MCP-pagina.

Veelgestelde vragen

Kan de kaart precies de auto tonen die de huurder krijgt?
Nee, en dat moet het ook niet proberen. Een categorie wordt gehuurd als ‘of vergelijkbaar’, en een render toont een merk, model en bouwjaar uit de catalogus, niet een auto op uw terrein. Toon één representatief model met ‘of vergelijkbaar’ in het label. Zodra aan de balie een specifieke auto is toegewezen, decodeert het VIN daarvan gratis naar het bijbehorende catalogusvoertuig, als u liever dat model toont.
Waarom zijn de auto's in het raster niet op schaal?
Omdat trim elke render bijsnijdt tot de auto en fit=contain de kaart ermee vult, vullen een compacte auto en een grote SUV hun kaart op dezelfde manier. Zo blijft een raster overzichtelijk. Geef de grootte in woorden aan: de naam van de categorie, het aantal zitplaatsen en het aantal koffers.
Wat kost het categorieraster?
Een vloot van 4 klassen met elk een kaart en een hero-afbeelding is 8 voertuigafbeeldingen per maand, elk zo vaak geleverd als nodig in elk formaat. Sla de bestanden op uw CDN op zolang een betaald abonnement actief is, dan tellen ze alleen mee in de maand waarin u ze ophaalt, met gratis hercontroles via ETag. Gebruikt u in plaats daarvan verlengende ondertekende URL’s, dan tellen dezelfde afbeeldingen één keer mee in elke maand waarin de pagina’s worden geopend.
Welke lakkleur moet het raster gebruiken?
Eén preset voor elke categorie, zodat de kaarten als een geheel overkomen. De 15 presets zijn white, black, gray, silver, blue, red, green, brown, beige, tan, orange, yellow, gold, burgundy, purple, en de standaard is silver; elke hexwaarde werkt ook, voor dezelfde prijs. De huurder krijgt de kleur van de auto die op het terrein staat, en die heeft de kaart nooit beloofd.
Wat als het model van een categorie niet in de catalogus staat?
Een voertuig dat er niet in staat, geeft een 404 met suggesties: de dichtstbijzijnde voertuigen uit de catalogus, elk met hun id. Gebruik er een van, of vraag het voertuig aan op het openbare aanvraagbord. De catalogus is open source.

Lees verder

Klantverhaal · OntwikkelaarstoolsAuto-afbeeldingen in e-mail insluiten met signed URLs die nooit brekenOnze eigen lifecycle-e-mails bevatten de exacte eerste render van elke klant als live ondertekende URL die zichzelf een jaar lang vernieuwt. Zo werkt dat en zo neemt u het over.