extract canvas and stage

[benoit-pixi]

Hi,

I would like to extract my pixi+gsap animation to xx.png. It's work but png is bigger (in pixel) than my canvas, probably because I rotate some sprite.
With mask on stage/sprites/…, I get the same size problem.

I try to create a container and append my sprite, but my sprite are 'ParticleContainer', so as I understand it's not possible.
From the bunny example I make this, but I think there is a better way!

For now, I make a 8000x8000 centered masked graphic to fixe my extract ?
 

const app = new PIXI.Application({ backgroundColor: 0x111111,width:200,height:200});
document.body.appendChild(app.view);

function takeScreenshot() {
    wait = true;
    let img = app.renderer.extract.canvas(app.stage);
    let wx = (img.width - 200)/2;
    let wy = (img.height - 200)/2;
    console.log(wx,wy);
    let canvas1=document.createElement('canvas');
    let ctx1=canvas1.getContext('2d');
    canvas1.width=200;
    canvas1.height=200;
    ctx1.drawImage(img,wx,wy,200,200,0,0,200,200);
  

  canvas1.toBlob((b) => {
        const a = document.createElement('a');
        document.body.append(a);
        a.download = 'screenshot';
        a.href = URL.createObjectURL(b);
        a.click();
        a.remove();
    }, 'image/png');
}

const crop = new PIXI.Graphics();
crop.beginFill(0x000000);
crop.drawRect(0, 0, 200, 200);
crop.endFill();

app.stage.mask = crop;

const texture = PIXI.Texture.from('bunny.png');
const bunnyContainer = new PIXI.Container();
bunnyContainer.pivot.set(0.5, 0.5);

for (let i = 0; i < 25; i++) {
    const bunny = new PIXI.Sprite(texture);
    bunny.anchor.set(0.5);
    bunny.x = (i % 5) * 40;
    bunny.y = Math.floor(i / 5) * 40;
    bunnyContainer.addChild(bunny);
}

bunnyContainer.x = 100;
bunnyContainer.y = 100;
bunnyContainer.pivot.x = bunnyContainer.width / 2;
bunnyContainer.pivot.y = bunnyContainer.height / 2;


bunnyContainer.rotation = 45*Math.PI/180;


app.stage.addChild(bunnyContainer);

 

[benoit-pixi]

look better with 

 

let renderTexture = PIXI.RenderTexture.create(w, h);
app.renderer.render(app.stage,renderTexture)

canvas1 = app.renderer.extract.canvas(renderTexture);
/* ... */

 

Edited December 2, 2020 by benoit-pixi

[ivan.popelyshev]

yes, that shoud do. fixing the size and texture removes many unnecessary operations that can bug. dont forget to destroy that renderTexture after you use it.