> ## Documentation Index
> Fetch the complete documentation index at: https://docs.simular.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> Represents an image.

## Constructor

```typescript
Image(): Image
```

### Returns

`Image`

## Properties

<ResponseField name={"dimensions"} type={"[number, number]"} required>
  Returns the image dimensions as `[width, height]` in pixels.
</ResponseField>

## Methods

### base64()

```typescript
base64(): string
```

Returns the image encoded as raw base64, without a MIME prefix.

#### Returns

`string`

### base64DataUrl()

```typescript
base64DataUrl(): string
```

Returns the image encoded as a base64 data URL.

The result includes the MIME prefix, for example
`data:image/png;base64,...`, `data:image/jpeg;base64,...`,
`data:image/gif;base64,...`, or `data:image/webp;base64,...`.

#### Returns

`string`

### compress()

```typescript
compress(quality: number): void
```

Compress the image by converting it to JPEG with the specified quality.

The quality is a value between 1 and 100.
1 is the lowest possible quality and 100 is the highest quality.

#### Parameters

<ResponseField name={"quality"} type={"number"} required />

### drawBox()

```typescript
drawBox(bounds: BoundingBox, thickness: number, red: number, green: number, blue: number): void
```

Draws the outline of the axis-aligned rectangle `bounds` on the image.
Useful for visualizing bounding boxes returned from grounding, element /
layout queries, ground-truth annotations, etc.

`bounds` is in image-pixel coordinates and covers `[left, right) × [top, bottom)` (`right` / `bottom` exclusive, matching a `BoundingBox`).
The border is `thickness` pixels wide, drawn inset within that range so
nothing is painted outside it, in the opaque RGB `(red, green, blue)`
color. Pixels that fall outside the image bounds are silently clipped, so
it is safe to call with a box that extends past the image. Throws when
`thickness` is `0` or `bounds` is degenerate (`right <= left` or
`bottom <= top`).

#### Parameters

<ResponseField name={"bounds"} type={"BoundingBox"} required />

<ResponseField name={"thickness"} type={"number"} required />

<ResponseField name={"red"} type={"number"} required />

<ResponseField name={"green"} type={"number"} required />

<ResponseField name={"blue"} type={"number"} required />

### drawDot()

```typescript
drawDot(x: number, y: number, radius: number, red: number, green: number, blue: number): void
```

Paints a filled disc on the image. Useful for visualizing point
coordinates returned from grounding, layout queries, etc.

`x` / `y` are image-pixel coordinates of the disc's centre. `radius`
is the disc radius in pixels (`0` paints a single pixel at the
centre). `(red, green, blue)` is the fill color; alpha is always 255
(opaque replacement of the underlying pixel).

Coordinates that fall outside the image bounds (negative, or past the
width / height) silently produce no pixel, so the helper is safe to
call with the raw output of a grounding model even at the edge of the
captured rect.

#### Parameters

<ResponseField name={"x"} type={"number"} required />

<ResponseField name={"y"} type={"number"} required />

<ResponseField name={"radius"} type={"number"} required />

<ResponseField name={"red"} type={"number"} required />

<ResponseField name={"green"} type={"number"} required />

<ResponseField name={"blue"} type={"number"} required />

### drawGrid()

```typescript
drawGrid(width: number, height: number): void
```

Draws a cross-hair grid on the image.

Grid squares have the specified `width` and `height`.

#### Parameters

<ResponseField name={"width"} type={"number"} required />

<ResponseField name={"height"} type={"number"} required />

### fromBase64()

```typescript
fromBase64(base64: string): Image
```

Decodes a base64 image string into an image.

Accepts either a raw base64 payload or a PNG, JPEG/JPG, GIF, or WebP
data URL.

#### Parameters

<ResponseField name={"base64"} type={"string"} required />

#### Returns

`Image`

### ground()

```typescript
ground(model: GroundingModel, concept: string): [number, number]
```

Locate `concept` on this image using the given grounding model and
return absolute zero-based pixel coordinates `[x, y]`.

Equivalent to `model.ground(image, concept)`

#### Parameters

<ResponseField name={"model"} type={"GroundingModel"} required />

<ResponseField name={"concept"} type={"string"} required />

#### Returns

`[number, number]`

### save()

```typescript
save(path: string): void
```

Path includes the file name and the extension.

#### Parameters

<ResponseField name={"path"} type={"string"} required />

### shrink()

```typescript
shrink(nwidth: number, nheight: number): void
```

Resizes this image if it is larger than the desired size. The image's
aspect ratio is preserved. The image is scaled to the maximum
possible size that fits within the bounds specified by nwidth and
nheight.

This method operates on pixel channel values directly without taking
into account color space data.

We commonly use this to resize the image to 1920x1080.

#### Parameters

<ResponseField name={"nwidth"} type={"number"} required />

<ResponseField name={"nheight"} type={"number"} required />