Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Three.js Screenshot

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 webgl)... So when I make screenshot it makes images only from WebGLRenderer. CSS3DRenderer is ignored and I don't know how to make screenshot image from both renderers. I'm using this solution: Take screenshot of <body> with html2canvas and store img as JS var

like image 739
Klemenko Avatar asked Dec 27 '13 12:12

Klemenko


3 Answers

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

like image 140
Develoteca Avatar answered Nov 01 '22 11:11

Develoteca


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.

like image 2
skam Avatar answered Nov 01 '22 11:11

skam


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 !

like image 1
thesmash Avatar answered Nov 01 '22 10:11

thesmash