リースの見積もりとオファー向けの車両画像

curl -s "https://carimage.dev/api/v1/vehicles?make=honda&model=cr-v"

{
  "data": {
    "make": {
      "id": 474,
      "name": "HONDA",
      "slug": "honda"
    },
    "model": {
      "name": "CR-V",
      "slug": "cr-v",
      "vehicle_type": "Passenger Car"
    },
    "vehicles": [
      "…",
      {
        "year": 2025,
        "id": "veh_exjyt8r21gmhe"
      },
      {
        "year": 2026,
        "id": "veh_b6kgpb03d73r9"
      },
      {
        "year": 2027,
        "id": "veh_8nr7res56a6jq"
      }
    ]
  }
}

# the 2026 offer's hero: its model year, in the paint it is offered in, cropped to a 16:9 slot
curl --fail-with-body -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  "https://carimage.dev/api/v1/images/car?vehicle=veh_b6kgpb03d73r9&view=front-3-4&color=1f3a5f&w=1024&h=576&fit=contain&trim=1&padding=4&format=webp" \
  -o cr-v-2026-offer.webp

import { CarImageClient, type ImageParams } from "@meterapp/car-image-sdk";

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

// The offer's picture: its model year, in the paint it is offered in.
const offerImage: ImageParams = {
  vehicle: offer.vehicleId, view: "front-3-4", color: offer.paintHex, // "#1f3a5f"
  width: 1024, height: 576, fit: "contain", trim: true, padding: 4,
};

// The quote PDF: rendered from HTML, the picture loaded once and embedded, on white.
const { data: [forPdf] } = await client.createImageUrls({ ...offerImage, format: "jpg" });
const pdf = await renderQuotePdf({ ...quote, vehicleImageUrl: forPdf.url });

// The offer email: loads for as long as the offer runs, then stops renewing.
const { data: [forEmail] } = await client.createImageUrls(
  { ...offerImage, width: 600, height: 338, format: "auto" },
  {
    ttlSeconds: 604800,
    renew: true,
    renewDays: Math.min(Math.max(daysUntil(offer.endsOn), 1), 365),
    idempotencyKey: `offer:${offer.id}:email`,
  }
);

curl --fail-with-body -X POST https://carimage.dev/api/v1/3d \
  -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: configurator-cr-v-2026-1f3a5f" \
  -d '{"vehicle": "veh_b6kgpb03d73r9", "color": "#1f3a5f", "publish": true}'

{
  "data": {
    "id": "5b0f3c2e-8a41-4d7e-9c10-2f6e1a3b4d58",
    "object": "3d_model",
    "status": "queued",
    "progress": 0,
    "vehicle": {
      "id": "veh_b6kgpb03d73r9",
      "make": "honda",
      "model": "cr-v",
      "year": 2026
    },
    "color": "#1f3a5f",
    "files": null,
    "public": {
      "id": "m3d_…",
      "url": "https://carimage.dev/api/v1/3d/public/m3d_…",
      "files": null,
      "embed": {
        "script": "https://carimage.dev/embed/3d.js",
        "html": "<script src=\"https://carimage.dev/embed/3d.js\" async></script>\n<car-3d model=\"m3d_…\"></car-3d>"
      }
    }
  },
  "billing": {
    "charged_on": "creation",
    "credits_charged": 100,
    "already_owned": false
  }
}

<script src="https://carimage.dev/embed/3d.js" async></script>

<select id="paint" aria-label="Paint">
  <option value="1f3a5f">Blue</option>
  <option value="white">White</option>
</select>

<!-- One published model per paint. Only the visible one is loaded: the script
     fetches a viewer the first time a model scrolls into view. -->
<car-3d data-paint="1f3a5f" model="m3d_…" view="front-3-4" spin backdrop="studio" ar
        alt="2026 Honda CR-V in the offer's blue"></car-3d>
<car-3d data-paint="white" model="m3d_…" view="front-3-4" spin backdrop="studio" ar
        alt="2026 Honda CR-V in white" hidden></car-3d>

<script>
  document.querySelector("#paint").addEventListener("change", (event) => {
    for (const model of document.querySelectorAll("car-3d[data-paint]")) {
      model.hidden = model.dataset.paint !== event.target.value;
    }
  });
</script>