# Interface: ElementImage

**`Experimental`** **`Advanced`**

A snapshot produced by the experimental HTML-in-Canvas `captureElementImage()` API.

A snapshot is a frozen, immutable copy of an element's rendered pixels at the moment it was
captured. Unlike a live [HTMLSource](rendering.HTMLSource.html.md) element, it never repaints, so it is a good fit
for effects that need a stable image (transitions, "shatter" effects, trails). Snapshots are
transferable and cheap to keep around; rendering live elements is what most apps reach for.

Call [ElementImage.close](#close) (or set [ElementImageSourceOptions.autoClose](rendering.ElementImageSourceOptions.html#autoclose)) to
release the underlying memory once you are done.

## Example

```ts
import { ElementImageSource, Sprite } from 'pixi.js/html-source';
import type { HTMLSourceCanvas } from 'pixi.js/html-source';

const canvas = app.canvas as HTMLSourceCanvas;

// Freeze the current pixels of an element into an immutable snapshot.
const snapshot = canvas.captureElementImage!(element);

const source = new ElementImageSource({ resource: snapshot });
const sprite = Sprite.from(source);
```

## See

 - [ElementImageSource](rendering.ElementImageSource.html.md) For rendering a snapshot as a texture
 - [HTMLSourceCanvas](rendering.HTMLSourceCanvas.html.md) For the canvas API that produces snapshots
 - [HTMLSource](rendering.HTMLSource.html.md) For rendering a live, repainting element instead

## Properties

### height

> `readonly` **height**: `number`

**`Experimental`**

The height of the captured snapshot, in pixels.

***

### width

> `readonly` **width**: `number`

**`Experimental`**

The width of the captured snapshot, in pixels.

## Methods

### close()

> **close**(): `void`

**`Experimental`**

Releases the memory backing this snapshot. The snapshot must not be used afterwards.

#### Returns

`void`