Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Exporting PIXI.stage as an image


FranekKimono
 Share

Recommended Posts

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);
Link to comment
Share on other sites

  • 1 year later...

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 ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...