Heatmap Canvas
Renders a source image with a heatmap visual effect by mapping pixel intensity to a color gradient.
Original
Colormap: Thermal
Intensity: luminance
Colormap: Viridis
Intensity: luminance
Colormap: Grayscale
Intensity: luminance
Colormap: Jet
Intensity: luminance
Colormap: Thermal
Intensity: r
Colormap: Thermal
Intensity: g
Colormap: Thermal
Intensity: b
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Prop | Default | Description | Type |
|---|---|---|---|
| src | — | Image URL (must be CORS-enabled for canvas read). | string |
| width | 400 | Display width in CSS pixels. | number |
| height | 300 | Display height in CSS pixels. | number |
| colormap | "thermal" | Color gradient: thermal, viridis, jet, or grayscale. | "thermal" | "viridis" | "jet" | "grayscale" |
| intensitySource | "luminance" | Intensity source: luminance, r, g, or b. | "luminance" | "r" | "g" | "b" |
| objectFit | "cover" | How the image fits: cover, contain, fill, or none. | "cover" | "contain" | "fill" | "none" |
| fill | false | When true, the component fills its outer container; size is determined by ResizeObserver. Parent must have explicit dimensions (e.g. h-64 or aspect-video). | boolean |
| className | — | Additional CSS class for the container. | string |