# Class: ElementImageSource

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

A texture source backed by an immutable [ElementImage](rendering.ElementImage.html.md) snapshot produced by the
experimental `captureElementImage()` API.

This is the static counterpart to [HTMLSource](rendering.HTMLSource.html.md): there is no owning canvas, no `paint`
listener, and no repaint lifecycle. The snapshot's pixels never change, so the source is
ready the moment it is constructed. Most apps render live elements with [HTMLSource](rendering.HTMLSource.html.md);
reach for `ElementImageSource` when you need a frozen copy that outlives its element or is
transferred around.

> [!NOTE]
> This relies on an experimental browser proposal. An `ElementImage` passed to `Texture.from`
> resolves to an `ElementImageSource` only as a last resort (lowest texture-source priority);
> construct it explicitly when you need [ElementImageSourceOptions](rendering.ElementImageSourceOptions.html.md).

## Examples

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

const canvas = app.canvas as HTMLSourceCanvas;
const snapshot = canvas.captureElementImage!(element);

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

app.stage.addChild(sprite);
```

```ts
// Slice a frozen snapshot into sub-textures (e.g. a "shatter" effect that keeps
// shattering even after the original element is gone).
import { Rectangle, Texture } from 'pixi.js';

const source = new ElementImageSource({ resource: snapshot });
const chunk = new Texture({
    source,
    frame: new Rectangle(0, 0, 64, 64),
});
```

## See

 - [ElementImageSourceOptions](rendering.ElementImageSourceOptions.html.md) For configuration options
 - [ElementImage](rendering.ElementImage.html.md) For the snapshot resource
 - [HTMLSource](rendering.HTMLSource.html.md) For rendering a live, repainting element
 - [Sprite](scene.Sprite.html.md) For displaying the source on screen

## Extends

- [`TextureSource`](rendering.TextureSource.html.md)\<[`ElementImage`](rendering.ElementImage.html.md)\>

## Constructors

### Constructor

> **new ElementImageSource**(`options`): `ElementImageSource`

**`Experimental`**

#### Parameters

##### options

[`ElementImageSourceOptions`](rendering.ElementImageSourceOptions.html.md)

Options for creating the snapshot source. `resource` is required.

#### Returns

`ElementImageSource`

#### Example

```ts
const source = new ElementImageSource({
    resource: snapshot, // an ElementImage from captureElementImage()
    autoClose: true,    // close the snapshot when this source is destroyed
});
```

#### Overrides

[`TextureSource`](rendering.TextureSource.html.md).[`constructor`](rendering.TextureSource.html#constructor)

## Properties

### \_gcData?

> `optional` **\_gcData**: [`GCData`](rendering.GCData.html.md)

**`Experimental`**

GC tracking data, undefined if not being tracked

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`_gcData`](rendering.TextureSource.html#_gcdata)

***

### alphaMode

> **alphaMode**: [`ALPHA_MODES`](rendering.ALPHA_MODES.html.md)

**`Experimental`**

the alpha mode of the texture

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`alphaMode`](rendering.TextureSource.html#alphamode)

***

### antialias

> **antialias**: `boolean` = `false`

**`Experimental`**

Only really affects RenderTextures.
Should we use antialiasing for this texture. It will look better, but may impact performance as a
Blit operation will be required to resolve the texture.

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`antialias`](rendering.TextureSource.html#antialias)

***

### arrayLayerCount

> **arrayLayerCount**: `number` = `1`

**`Experimental`**

how many array layers this texture has (WebGPU depthOrArrayLayers)

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`arrayLayerCount`](rendering.TextureSource.html#arraylayercount)

***

### autoGarbageCollect

> **autoGarbageCollect**: `boolean`

**`Experimental`**

If true, the Garbage Collector will unload this texture if it is not used after a period of time

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`autoGarbageCollect`](rendering.TextureSource.html#autogarbagecollect)

***

### autoGenerateMipmaps

> **autoGenerateMipmaps**: `boolean` = `false`

**`Experimental`**

Should we auto generate mipmaps for this texture? This will automatically generate mipmaps
for this texture when uploading to the GPU. Mipmapped textures take up more memory, but
can look better when scaled down.

For performance reasons, it is recommended to NOT use this with RenderTextures, as they are often updated every frame.
If you do, make sure to call `updateMipmaps` after you update the texture.

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`autoGenerateMipmaps`](rendering.TextureSource.html#autogeneratemipmaps)

***

### destroyed

> `readonly` **destroyed**: `boolean`

**`Experimental`**

Has the source been destroyed?

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`destroyed`](rendering.TextureSource.html#destroyed)

***

### dimension

> **dimension**: [`TEXTURE_DIMENSIONS`](rendering.TEXTURE_DIMENSIONS.html.md) = `'2d'`

**`Experimental`**

how many dimensions does this texture have? currently v8 only supports 2d

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`dimension`](rendering.TextureSource.html#dimension)

***

### format

> **format**: [`TEXTURE_FORMATS`](rendering.TEXTURE_FORMATS.html.md) = `'rgba8unorm'`

**`Experimental`**

the format that the texture data has

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`format`](rendering.TextureSource.html#format)

***

### height

> **height**: `number` = `1`

**`Experimental`**

the height of this texture source, accounting for resolution
eg pixelHeight 200, resolution 2, then height will be 100

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`height`](rendering.TextureSource.html#height)

***

### isPowerOfTwo

> **isPowerOfTwo**: `boolean`

**`Experimental`**

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`isPowerOfTwo`](rendering.TextureSource.html#ispoweroftwo)

***

### isReady

> `readonly` **isReady**: `true` = `true`

**`Experimental`**

Snapshots are immutable, so the source is ready as soon as it is constructed.

***

### label

> **label**: `string`

**`Experimental`**

optional label, can be used for debugging

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`label`](rendering.TextureSource.html#label)

***

### mipLevelCount

> **mipLevelCount**: `number` = `1`

**`Experimental`**

The number of mip levels to generate for this texture.
this is overridden if autoGenerateMipmaps is true. it is read only!

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`mipLevelCount`](rendering.TextureSource.html#miplevelcount)

***

### pixelHeight

> **pixelHeight**: `number` = `1`

**`Experimental`**

the pixel height of this texture source. This is the REAL pure number, not accounting resolution

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`pixelHeight`](rendering.TextureSource.html#pixelheight)

***

### pixelWidth

> **pixelWidth**: `number` = `1`

**`Experimental`**

the pixel width of this texture source. This is the REAL pure number, not accounting resolution

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`pixelWidth`](rendering.TextureSource.html#pixelwidth)

***

### resource

> **resource**: [`ElementImage`](rendering.ElementImage.html.md)

**`Experimental`**

the resource that will be uploaded to the GPU. This is where we get our pixels from
eg an ImageBimt / Canvas / Video etc

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`resource`](rendering.TextureSource.html#resource)

***

### uid

> `readonly` **uid**: `number`

**`Experimental`**

unique id for this Texture source

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`uid`](rendering.TextureSource.html#uid)

***

### uploadMethodId

> **uploadMethodId**: `string` = `'html'`

**`Experimental`**

The upload method for this texture.

#### Overrides

`TextureSource.uploadMethodId`

***

### viewDimension

> **viewDimension**: [`TEXTURE_VIEW_DIMENSIONS`](rendering.TEXTURE_VIEW_DIMENSIONS.html.md) = `'2d'`

**`Experimental`**

how this texture is viewed/sampled by shaders (WebGPU view dimension)

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`viewDimension`](rendering.TextureSource.html#viewdimension)

***

### width

> **width**: `number` = `1`

**`Experimental`**

the width of this texture source, accounting for resolution
eg pixelWidth 200, resolution 2, then width will be 100

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`width`](rendering.TextureSource.html#width)

***

### defaultOptions

> `static` **defaultOptions**: [`TextureSourceOptions`](rendering.TextureSourceOptions.html.md)

**`Experimental`**

The default options used when creating a new TextureSource. override these to add your own defaults

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`defaultOptions`](rendering.TextureSource.html#defaultoptions)

***

### extension

> `static` **extension**: [`ExtensionMetadata`](extensions.ExtensionMetadata.html.md)

**`Experimental`**

Registers the source with the [extensions](extensions.extensions.html.md) system at the lowest texture-source
priority, so automatic detection only falls back to it when no other built-in source
claims the resource.

***

### from()

> `static` **from**: (`resource`) => [`TextureSource`](rendering.TextureSource.html.md)

**`Experimental`**

A helper function that creates a new TextureSource based on the resource you provide.

#### Parameters

##### resource

[`TextureResourceOrOptions`](rendering.TextureResourceOrOptions.html.md)

The resource to create the texture source from.

#### Returns

[`TextureSource`](rendering.TextureSource.html.md)

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`from`](rendering.TextureSource.html#from)

## Accessors

### addressMode

#### Get Signature

> **get** **addressMode**(): [`WRAP_MODE`](rendering.WRAP_MODE.html.md)

**`Experimental`**

setting this will set wrapModeU, wrapModeV and wrapModeW all at once!

##### Returns

[`WRAP_MODE`](rendering.WRAP_MODE.html.md)

#### Set Signature

> **set** **addressMode**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`WRAP_MODE`](rendering.WRAP_MODE.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`addressMode`](rendering.TextureSource.html#addressmode)

***

### lodMaxClamp

#### Get Signature

> **get** **lodMaxClamp**(): `number`

**`Experimental`**

Specifies the minimum and maximum levels of detail, respectively, used internally when sampling a texture.

##### Returns

`number`

#### Set Signature

> **set** **lodMaxClamp**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

`number`

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`lodMaxClamp`](rendering.TextureSource.html#lodmaxclamp)

***

### lodMinClamp

#### Get Signature

> **get** **lodMinClamp**(): `number`

**`Experimental`**

Specifies the minimum and maximum levels of detail, respectively, used internally when sampling a texture.

##### Returns

`number`

#### Set Signature

> **set** **lodMinClamp**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

`number`

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`lodMinClamp`](rendering.TextureSource.html#lodminclamp)

***

### magFilter

#### Get Signature

> **get** **magFilter**(): [`SCALE_MODE`](rendering.SCALE_MODE.html.md)

**`Experimental`**

Specifies the sampling behavior when the sample footprint is smaller than or equal to one texel.

##### Returns

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

#### Set Signature

> **set** **magFilter**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`magFilter`](rendering.TextureSource.html#magfilter)

***

### maxAnisotropy

#### Get Signature

> **get** **maxAnisotropy**(): `number`

**`Experimental`**

##### Returns

`number`

#### Set Signature

> **set** **maxAnisotropy**(`value`): `void`

**`Experimental`**

Specifies the maximum anisotropy value clamp used by the sampler.

##### Parameters

###### value

`number`

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`maxAnisotropy`](rendering.TextureSource.html#maxanisotropy)

***

### minFilter

#### Get Signature

> **get** **minFilter**(): [`SCALE_MODE`](rendering.SCALE_MODE.html.md)

**`Experimental`**

Specifies the sampling behavior when the sample footprint is larger than one texel.

##### Returns

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

#### Set Signature

> **set** **minFilter**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`minFilter`](rendering.TextureSource.html#minfilter)

***

### mipmapFilter

#### Get Signature

> **get** **mipmapFilter**(): [`SCALE_MODE`](rendering.SCALE_MODE.html.md)

**`Experimental`**

Specifies behavior for sampling between mipmap levels.

##### Returns

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

#### Set Signature

> **set** **mipmapFilter**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`mipmapFilter`](rendering.TextureSource.html#mipmapfilter)

***

### repeatMode

#### Get Signature

> **get** **repeatMode**(): [`WRAP_MODE`](rendering.WRAP_MODE.html.md)

**`Experimental`**

setting this will set wrapModeU, wrapModeV and wrapModeW all at once!

##### Returns

[`WRAP_MODE`](rendering.WRAP_MODE.html.md)

#### Set Signature

> **set** **repeatMode**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`WRAP_MODE`](rendering.WRAP_MODE.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`repeatMode`](rendering.TextureSource.html#repeatmode)

***

### resolution

#### Get Signature

> **get** **resolution**(): `number`

**`Experimental`**

the resolution of the texture. Changing this number, will not change the number of pixels in the actual texture
but will the size of the texture when rendered.

changing the resolution of this texture to 2 for example will make it appear twice as small when rendered (as pixel
density will have increased)

##### Returns

`number`

#### Set Signature

> **set** **resolution**(`resolution`): `void`

**`Experimental`**

##### Parameters

###### resolution

`number`

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`resolution`](rendering.TextureSource.html#resolution)

***

### resourceHeight

#### Get Signature

> **get** **resourceHeight**(): `number`

**`Experimental`**

The height of the snapshot in pixels, rounded up.

##### Example

```ts
const source = new ElementImageSource({ resource: snapshot });

console.log(source.resourceWidth, source.resourceHeight);
```

##### Returns

`number`

#### Overrides

[`TextureSource`](rendering.TextureSource.html.md).[`resourceHeight`](rendering.TextureSource.html#resourceheight)

***

### resourceWidth

#### Get Signature

> **get** **resourceWidth**(): `number`

**`Experimental`**

The width of the snapshot in pixels, rounded up.

##### Example

```ts
const source = new ElementImageSource({ resource: snapshot });

console.log(source.resourceWidth, source.resourceHeight);
```

##### Returns

`number`

#### Overrides

[`TextureSource`](rendering.TextureSource.html.md).[`resourceWidth`](rendering.TextureSource.html#resourcewidth)

***

### scaleMode

#### Get Signature

> **get** **scaleMode**(): [`SCALE_MODE`](rendering.SCALE_MODE.html.md)

**`Experimental`**

setting this will set magFilter,minFilter and mipmapFilter all at once!

##### Returns

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

#### Set Signature

> **set** **scaleMode**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`SCALE_MODE`](rendering.SCALE_MODE.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`scaleMode`](rendering.TextureSource.html#scalemode)

***

### source

#### Get Signature

> **get** **source**(): [`TextureSource`](rendering.TextureSource.html.md)

**`Experimental`**

returns itself

##### Returns

[`TextureSource`](rendering.TextureSource.html.md)

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`source`](rendering.TextureSource.html#source)

***

### style

#### Get Signature

> **get** **style**(): [`TextureStyle`](rendering.TextureStyle.html.md)

**`Experimental`**

the style of the texture

##### Returns

[`TextureStyle`](rendering.TextureStyle.html.md)

#### Set Signature

> **set** **style**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`TextureStyle`](rendering.TextureStyle.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`style`](rendering.TextureSource.html#style)

***

### wrapMode

#### Get Signature

> **get** **wrapMode**(): [`WRAP_MODE`](rendering.WRAP_MODE.html.md)

**`Experimental`**

##### Returns

[`WRAP_MODE`](rendering.WRAP_MODE.html.md)

#### Set Signature

> **set** **wrapMode**(`value`): `void`

**`Experimental`**

##### Parameters

###### value

[`WRAP_MODE`](rendering.WRAP_MODE.html.md)

##### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`wrapMode`](rendering.TextureSource.html#wrapmode)

## Methods

### destroy()

> **destroy**(): `void`

**`Experimental`**

Destroys the underlying texture source. When [ElementImageSourceOptions.autoClose](rendering.ElementImageSourceOptions.html#autoclose)
was set, also calls [ElementImage.close](rendering.ElementImage.html#close) on the snapshot.

#### Returns

`void`

#### Example

```ts
const source = new ElementImageSource({ resource: snapshot });

source.destroy();
snapshot.close(); // release the snapshot yourself unless autoClose was set
```

#### Overrides

[`TextureSource`](rendering.TextureSource.html.md).[`destroy`](rendering.TextureSource.html#destroy)

***

### resize()

> **resize**(`width?`, `height?`, `resolution?`): `boolean`

**`Experimental`**

Resize the texture, this is handy if you want to use the texture as a render texture

#### Parameters

##### width?

`number`

the new width of the texture

##### height?

`number`

the new height of the texture

##### resolution?

`number`

the new resolution of the texture

#### Returns

`boolean`

- if the texture was resized

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`resize`](rendering.TextureSource.html#resize)

***

### unload()

> **unload**(): `void`

**`Experimental`**

This will unload the Texture source from the GPU. This will free up the GPU memory
As soon as it is required fore rendering, it will be re-uploaded.

#### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`unload`](rendering.TextureSource.html#unload)

***

### update()

> **update**(): `void`

**`Experimental`**

call this if you have modified the texture outside of the constructor

#### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`update`](rendering.TextureSource.html#update)

***

### updateMipmaps()

> **updateMipmaps**(): `void`

**`Experimental`**

Lets the renderer know that this texture has been updated and its mipmaps should be re-generated.
This is only important for RenderTexture instances, as standard Texture instances will have their
mipmaps generated on upload. You should call this method after you make any change to the texture

The reason for this is is can be quite expensive to update mipmaps for a texture. So by default,
We want you, the developer to specify when this action should happen.

Generally you don't want to have mipmaps generated on Render targets that are changed every frame,

#### Returns

`void`

#### Inherited from

[`TextureSource`](rendering.TextureSource.html.md).[`updateMipmaps`](rendering.TextureSource.html#updatemipmaps)

***

### test()

> `static` **test**(`resource`): `resource is ElementImage`

**`Experimental`**

Tests whether a resource is an [ElementImage](rendering.ElementImage.html.md) snapshot, used during automatic
source detection (`Texture.from`, `TextureSource.from`).

#### Parameters

##### resource

`any`

The resource to test.

#### Returns

`resource is ElementImage`

`true` if this source can handle the resource.

#### Overrides

[`TextureSource`](rendering.TextureSource.html.md).[`test`](rendering.TextureSource.html#test)