Exporting PIXI.stage as an image

[FranekKimono]

Howdy folks,

 

Is it is possible to programmatically capture the PIXI stage as an image for download? 

 

It appears this is possible with the <canvas> element using toDataURL() but PIXI doesn't work in the same way. Perhaps someone can point this n00b in the right direction.

 

Thanks muchly in advance.

 

[xerver]

Im not sure why you think "PIXI doesn't work in the same way". Pixi is definately rendering to a canvas, that you can call toDataURL() on.

[FranekKimono]

You've got a point, sir. 

 

Though I am still a bit puzzled as the data returned from 'renderer.view.toDataURL()' is still just an image with the colour of the background with no other elements visible.

 

Is 'renderer.view' not the main canvas element?

[FranekKimono]

I have found the error of my ways.

 

The problem was that I didn't render the stage right before exporting. In an effort to have this thread not be a complete waste of everyone's time I'll do penance by quickly summing up my method of exporting a PIXI canvas (whether webGL or not) to an image.

//here is the renderervar renderer = PIXI.autoDetectRenderer(width, height);//I first rendered the stage **important**renderer.render(stage);//I grabbed the canvas element pixi uses and extracted the base64 data from itvar data = renderer.view.toDataURL();//what to do with this data? one option is to assign it as the src of an <image> //In this case I open another window to display itvar win=window.open();win.document.write("<img src='" + data + "'/>");//or you can grab a js plugin like Canvas2Image.js which downloads the image directly//though it still has some bugsCanvas2Image.saveAsPNG(renderer.view);

[omarojo]

This is great but.....

 

How do you generate an image out a specific PIxi Container ? 

I want to send and image of a specific container to a server via HTTP post. But your example seems to generate an image of the entire canvas. 

 

Any suggestions ?

[xerver]

The only thing you can do is generate an image of the entire canvas, if you want a sub section. Render that to a different canvas and use this technique on it.

[omarojo]

Thanks for the suggestion. I will try it and come back to let you know. appreciated