pixi.js
    Preparing search index...

    Interface ElementImageExperimental 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 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 (or set ElementImageSourceOptions.autoClose) to release the underlying memory once you are done.

    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);
    interface ElementImage {
        height: number;
        width: number;
        close(): void;
    }
    Index

    Properties

    height width

    Methods

    close

    Properties

    height: number

    The height of the captured snapshot, in pixels.

    width: number

    The width of the captured snapshot, in pixels.

    Methods

    • Experimental

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

      Returns void

    Settings

    Member Visibility

    On This Page

    Properties
    Methods