Converts the target into a base64 encoded string.
This method works by first creating
a canvas using Extract.canvas
and then converting it to a base64 string.
The options for creating the base64 string, or the target to extract
Promise that resolves with the base64 encoded string
// Basic usage with a sprite
const sprite = new Sprite(texture);
const base64 = await renderer.extract.base64(sprite);
console.log(base64); // data:image/png;base64,...
// Advanced usage with options
const base64 = await renderer.extract.base64({
target: container,
format: 'webp',
quality: 0.8,
frame: new Rectangle(0, 0, 100, 100),
resolution: 2
});
Will throw an error if the platform doesn't support any of:
Creates a Canvas element, renders the target to it and returns it. This method is useful for creating static images or when you need direct canvas access.
The options for creating the canvas, or the target to extract
A Canvas element with the texture rendered on
// Basic canvas extraction from a sprite
const sprite = new Sprite(texture);
const canvas = renderer.extract.canvas(sprite);
document.body.appendChild(canvas);
// Extract with custom region
const canvas = renderer.extract.canvas({
target: container,
frame: new Rectangle(0, 0, 100, 100)
});
// Extract with high resolution
const canvas = renderer.extract.canvas({
target: sprite,
resolution: 2,
clearColor: '#ff0000'
});
// Extract directly from a texture
const texture = Texture.from('myTexture.png');
const canvas = renderer.extract.canvas(texture);
// Extract with anti-aliasing
const canvas = renderer.extract.canvas({
target: graphics,
antialias: true
});
Extracts and downloads content from the renderer as an image file. This is a convenient way to save screenshots or export rendered content.
The download will use PNG format regardless of the filename extension
The options for downloading and extracting the image, or the target to extract
// Basic download with default filename
const sprite = new Sprite(texture);
renderer.extract.download(sprite); // Downloads as 'image.png'
// Download with custom filename
renderer.extract.download({
target: sprite,
filename: 'screenshot.png'
});
// Download with custom region
renderer.extract.download({
target: container,
filename: 'region.png',
frame: new Rectangle(0, 0, 100, 100)
});
// Download with high resolution and background
renderer.extract.download({
target: stage,
filename: 'hd-screenshot.png',
resolution: 2,
clearColor: '#ff0000'
});
// Download with anti-aliasing
renderer.extract.download({
target: graphics,
filename: 'smooth.png',
antialias: true
});
Creates an HTMLImageElement from a display object or texture.
Options for creating the image, or the target to extract
Promise that resolves with the generated HTMLImageElement
// Basic usage with a sprite
const sprite = new Sprite(texture);
const image = await renderer.extract.image(sprite);
document.body.appendChild(image);
// Advanced usage with options
const image = await renderer.extract.image({
target: container,
format: 'webp',
quality: 0.8,
frame: new Rectangle(0, 0, 100, 100),
resolution: 2,
clearColor: '#ff0000',
antialias: true
});
// Extract directly from a texture
const texture = Texture.from('myTexture.png');
const image = await renderer.extract.image(texture);
Advanced
Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer. The image will be displayed in the browser's console using CSS background images.
The options for logging the image, or the target to log
Returns a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (inclusive).
[!NOE] The returned array is a flat Uint8Array where every 4 values represent RGBA
The options for extracting the image, or the target to extract
One-dimensional Uint8Array containing the pixel data in RGBA format
// Basic pixel extraction
const sprite = new Sprite(texture);
const pixels = renderer.extract.pixels(sprite);
console.log(pixels[0], pixels[1], pixels[2], pixels[3]); // R,G,B,A values
// Extract with custom region
const pixels = renderer.extract.pixels({
target: sprite,
frame: new Rectangle(0, 0, 100, 100)
});
// Extract with high resolution
const pixels = renderer.extract.pixels({
target: sprite,
resolution: 2
});
Creates a texture from a display object or existing texture.
This is useful for creating reusable textures from rendered content or making copies of existing textures.
The returned texture should be destroyed when no longer needed
The options for creating the texture, or the target to extract
A new texture containing the extracted content
// Basic texture extraction from a sprite
const sprite = new Sprite(texture);
const extractedTexture = renderer.extract.texture(sprite);
// Extract with custom region
const regionTexture = renderer.extract.texture({
target: container,
frame: new Rectangle(0, 0, 100, 100)
});
// Extract with high resolution
const hiResTexture = renderer.extract.texture({
target: sprite,
resolution: 2,
clearColor: '#ff0000'
});
// Create a new sprite from extracted texture
const newSprite = new Sprite(
renderer.extract.texture({
target: graphics,
antialias: true
})
);
// Clean up when done
extractedTexture.destroy(true);
The renderer this System works for.
Static
defaultDefault options for image extraction.
Generic destroy methods to be overridden by the subclass
System for exporting content from a renderer. It provides methods to extract content as images, canvases, or raw pixel data. Available through
renderer.extract
.Example
Features:
Common Use Cases:
Performance Considerations: