Class: ExtractSystem

ExtractSystem

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.

new ExtractSystem (renderer)

ts:112

Name	Type	Description
`renderer`	Renderer	The renderer this System works for.

Example

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

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

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

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

Implements

System

Members

defaultImageOptions ImageOptions static

Default options for creating an image.

Properties:

Name	Type	Default	Description
`format`			The format of the image.
`quality`	number	`1`	The quality of the image.

Methods

base64 (options) Promise<string>

ts:151

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

Name	Type	Description
`options`	ExtractImageOptions \| Container \| Texture	The options for creating the image, or the target to extract

Returns:

Type	Description
Promise<string>

canvas (options) ICanvas

ts:211

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

Name	Type	Description
`options`	ExtractOptions \| Container \| Texture	The options for creating the canvas, or the target to extract

Returns:

Type	Description
ICanvas	A Canvas element with the texture rendered on.

download (options)

ts:280

Will extract a HTMLImage of the target and download it

Name	Type	Description
`options`	ExtractDownloadOptions \| Container \| Texture	The options for downloading and extracting the image, or the target to extract

image (options) Promise<HTMLImageElement>

ts:137

Will return a HTML Image of the target

Name	Type	Description
`options`	ExtractImageOptions \| Container \| Texture	The options for creating the image, or the target to extract

Returns:

Type	Description
Promise<HTMLImageElement>	HTML Image of the target

log (options)

ts:299

Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer.

Name	Type	Description
`options`	(ExtractOptions & { width? : number }) \| Container \| Texture	The options for logging the image, or the target to log

pixels (options) GetPixelsOutput

ts:238

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).

Name	Type	Description
`options`	ExtractOptions \| Container \| Texture	The options for extracting the image, or the target to extract

Returns:

Type	Description
GetPixelsOutput	One-dimensional array containing the pixel data of the entire texture

texture (options) Texture

ts:266

Will return a texture of the target

Name	Type	Description
`options`	ExtractOptions \| Container \| Texture	The options for creating the texture, or the target to extract

Returns:

Type	Description
Texture	A texture of the target