Three.js Screenshot

Question

I need to make screenshot of website. I tried using html2canvas and all and it\'s working. But problem is i\'m using THREE.WebGLRenderer and THREE.CSS3DRenderer (for html in

Answer 1

I implemented this feature thanks to the file saver js lib

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

$("#btn_print").click(function() {
    Render.domElement.toBlob(function(blob) {
        saveAs(blob, "Final");
    });
});

I hope this helps !

Answer 2

you can use this code var Render=new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});

and a function onclick print:

$("#btn_print").click(function() {
                window.open( Render.domElement.toDataURL("image/png"), "Final");
                return false;
            });

Example online: http://develoteca.com/Panel/ clic on button Print

The key is: {antialias: true, preserveDrawingBuffer: true} in object WebGLRenderer

,regards.

visit:http://develoteca.com

Answer 3

Try understanding the code of this chrome extension Screen Capture. You can find the code in ~/.config/chromium/Default/Extensions/<extention_id_in_link> after installing it.

It uses chrome.tabs.captureVisibleTab. Refer the documentation. As it's an API provided by chrome browser to interact with its tabs it works only on Google Chrome.