How to take screenshot of CSS 3D Renderer in Three JS?

Question

I have a Three JS application that involves CSS 3D Renderer. I am using html2canvas library to take screenshots of document.body.

The only problem is that it takes a screenshot of everything except the CSS 3D Renderer.

Here's the code for taking the screenshot:

window.addEventListener("keyup", function(e){

    //Listen to 'P' key
    if(e.which !== 80) return;

    html2canvas(document.body, {
      onrendered: function(canvas) {
        var img = canvas.toDataURL();
        window.open( img , 'Final' );
      }
    });
});

For a demo, please visit:

http://nobelbrothers.com/test/CanvasShot and http://nobelbrothers.com/CanvasShot

Note: Press P to take a screenshot (You need to turn off pop-up blocker).

Thank you

I don't believe any of the html to canvas renderers handle 3D CSS. — gman, Jun 28 '14 at 16:36
Then is there an alternative way to sync CSS 3D Scenes across multiple displays/screens @gman? — Adnan Zahid, Jun 29 '14 at 16:29

score 0 · Answer 1 · answered Nov 01 '14 at 08:21

I implemented this feature thanks to the file saver js lib

 <script type="text/javascript" src="js/filesaver.js"></script>

window.addEventListener("keyup", function(e){

    //Listen to 'P' key
    if(e.which !== 80) return;
    Render.domElement.toBlob(function(blob) {
        saveAs(blob, "Final");
    });
});

How to take screenshot of CSS 3D Renderer in Three JS?

1 Answers1