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

回答1:

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

回答2:

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.

回答3:

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

标签

javascript

three.js

screenshot

webpage

html2canvas