@pixi/extract

What is @pixi/extract?

@pixi/extract is a package that provides utilities for extracting image data from PIXI.js display objects. It allows you to convert display objects into different formats such as base64 strings, image data, or raw pixel data.

What are @pixi/extract's main functionalities?

Extracting Base64 String

This feature allows you to extract a display object as a base64 encoded string. The code sample demonstrates creating a red rectangle and extracting it as a base64 string using the extract plugin.

const app = new PIXI.Application();
const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();
app.stage.addChild(graphics);
const base64 = app.renderer.plugins.extract.base64(graphics);

Extracting Image Data

This feature allows you to extract a display object as an HTMLImageElement. The code sample shows how to create a green circle and extract it as an image element.

const app = new PIXI.Application();
const graphics = new PIXI.Graphics();
graphics.beginFill(0x00ff00);
graphics.drawCircle(50, 50, 50);
graphics.endFill();
app.stage.addChild(graphics);
const imageData = app.renderer.plugins.extract.image(graphics);

Extracting Pixels

This feature allows you to extract raw pixel data from a display object. The code sample demonstrates creating a blue ellipse and extracting its pixel data as a Uint8Array.

const app = new PIXI.Application();
const graphics = new PIXI.Graphics();
graphics.beginFill(0x0000ff);
graphics.drawEllipse(50, 50, 50, 25);
graphics.endFill();
app.stage.addChild(graphics);
const pixels = app.renderer.plugins.extract.pixels(graphics);

Other packages similar to @pixi/extract

html2canvas

html2canvas is a popular library that allows you to take 'screenshots' of webpages or specific DOM elements and convert them into canvas elements. While @pixi/extract is specific to PIXI.js display objects, html2canvas is more general-purpose and can be used with any HTML content.

dom-to-image

dom-to-image is a library that generates images from DOM nodes. It is similar to html2canvas but offers different options and configurations. Like html2canvas, it is not specific to PIXI.js and can be used for any HTML element, whereas @pixi/extract is tailored for PIXI.js applications.

README

@pixi/extract

Installation

npm install @pixi/extract

Usage

import '@pixi/extract';