8

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

Community
  • 1
  • 1
Klemenko
  • 704
  • 1
  • 10
  • 21

3 Answers3

11

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

Develoteca
  • 307
  • 1
  • 4
  • Yeah I tried that was but still i'm using two renderers (THREE.WebGLRenderer and THREE.CSS3DRenderer). It's working perfectly for 3D objects and all but my emmbed html is not on screenshot :D I think I'm going to use smht else for html inside webgl. – Klemenko Dec 27 '13 at 22:10
  • Is there a way to download this screenshot ? – Iraklis Bekiaris Dec 29 '15 at 13:30
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.

skam
  • 357
  • 5
  • 18
  • 1
    Well this isn't exactly the answer but it pointed me in the right direction. This is exactly what I was looking for: https://www.webrtc-experiment.com/RTCMultiConnection/screen-sharing.html Thank you. I am awarding you the bounty now but next time please be clear about your answer. – Adnan Zahid Jul 04 '14 at 21:50
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 !

thesmash
  • 599
  • 6
  • 9