app.renderer.extract.pixels(sprite) return [0, 0, 0, 0] What am I doing wrong?

[Branlin]

var app = new PIXI.Application(800, 600, {forceCanvas:true, backgroundColor : 0xffffff});
document.body.appendChild(app.view);

var bunny = PIXI.Sprite.fromImage('bunny.png')
var pixels = app.renderer.extract.pixels(bunny);

console.log(pixels)

 in devtool console:

Quote

> Uint8ClampedArray(4) [0, 0, 0, 0]

I need pixels, but I'm a strange result.

[themoonrat]

the renderer hasn't actually rendered anything yet. Force the renderer to render what you've put on screen first via app.render();

[lloydevans]

Yes, and also make sure the texture is loaded.

[Branlin]

Thank all!

app.render() is no need

It's work.

const app, resources;

app = new PIXI.Application(800, 600, {forceCanvas:true, backgroundColor : 0xffffff});
document.body.appendChild(app.view);

loader = new PIXI.loaders.Loader();

loader.add('bunny', 'bunny.png')

loader.onComplete.add((result) => {

    resources = result.resources;
    run();
  
});

loader.load();

//
function run() {

    var bunny = new PIXI.Sprite(resources.bunny.texture)
    app.stage.addChild(bunny);

    var pixels = app.renderer.extract.pixels(bunny);
    console.log(pixels);

}

 

[lloydevans]

app.render would of been needed if you'd wanted to extract the pixels from the renderer, but you are extracting them from the texture itself  The texture having been loaded is needed in both cases.