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
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
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.
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 !
来源：https://stackoverflow.com/questions/20801075/three-js-screenshot