Class Extract

This class provides renderer-specific plugins for exporting content from a renderer. For instance, these plugins can be used for saving an Image, Canvas element or for exporting the raw image data (pixels).

Do not instantiate these plugins directly. It is available from the renderer.extract property.

Example

import { Application, Graphics } from 'pixi.js';

// Create a new application (extract will be auto-added to renderer)
const app = new Application();

// Draw a red circle
const graphics = new Graphics()
    .beginFill(0xFF0000)
    .drawCircle(0, 0, 50);

// Render the graphics as an HTMLImageElement
const image = await app.renderer.extract.image(graphics);
document.body.appendChild(image);

Memberof

PIXI

Implements

Constructors

constructor

Methods

base64 canvas destroy image pixels

Constructors

constructor

  • new Extract(renderer: Renderer): Extract

  • Parameters

    • renderer: Renderer

      A reference to the current renderer

    Returns Extract

Methods

base64

  • base64(
        target?: DisplayObject | RenderTexture,
        format?: string,
        quality?: number,
        frame?: Rectangle,
    ): Promise<string>

  • Will return a base64 encoded string of this target. It works by calling Extract.canvas and then running toDataURL on that.

    Parameters

    • Optionaltarget: DisplayObject | RenderTexture

      A displayObject or renderTexture to convert. If left empty will use the main renderer

    • Optionalformat: string

      Image format, e.g. "image/jpeg" or "image/webp".

    • Optionalquality: number

      JPEG or Webp compression from 0 to 1. Default is 0.92.

    • Optionalframe: Rectangle

      The frame the extraction is restricted to.

    Returns Promise<string>

    • A base64 encoded string of the texture.

canvas

  • canvas(target?: DisplayObject | RenderTexture, frame?: Rectangle): ICanvas

  • Creates a Canvas element, renders this target to it and then returns it.

    Parameters

    • Optionaltarget: DisplayObject | RenderTexture

      A displayObject or renderTexture to convert. If left empty will use the main renderer

    • Optionalframe: Rectangle

      The frame the extraction is restricted to.

    Returns ICanvas

    • A Canvas element with the texture rendered on.

destroy

  • destroy(): void

  • Destroys the extract.

    Returns void

image

  • image(
        target?: DisplayObject | RenderTexture,
        format?: string,
        quality?: number,
        frame?: Rectangle,
    ): Promise<HTMLImageElement>

  • Will return a HTML Image of the target

    Parameters

    • Optionaltarget: DisplayObject | RenderTexture

      A displayObject or renderTexture to convert. If left empty will use the main renderer

    • Optionalformat: string

      Image format, e.g. "image/jpeg" or "image/webp".

    • Optionalquality: number

      JPEG or Webp compression from 0 to 1. Default is 0.92.

    • Optionalframe: Rectangle

      The frame the extraction is restricted to.

    Returns Promise<HTMLImageElement>

    • HTML Image of the target

pixels

  • pixels(target?: DisplayObject | RenderTexture, frame?: Rectangle): Uint8Array

  • Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included).

    Parameters

    • Optionaltarget: DisplayObject | RenderTexture

      A displayObject or renderTexture to convert. If left empty will use the main renderer

    • Optionalframe: Rectangle

      The frame the extraction is restricted to.

    Returns Uint8Array

    • One-dimensional array containing the pixel data of the entire texture

Settings

Member Visibility

On This Page

Constructors
Methods