Three.js: Exporting to image

[nemild]

It'd be great to have a simple way to export a frame of an animation to an image (jpg, png, gif, etc.) for download.

[WestLangley]

Check out http://learningthreejs.com/blog/2011/09/03/screenshot-in-javascript/ .

[mrdoob]

Yup.

var renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );

window.open( renderer.domElement.toDataURL( 'image/png' ), 'screenshot' );

It's all you need.

[nebeleh]

Can you use a similar code for CSS3D to make a screenshot from an embedded iframe? e.g.

var element = document.createElement('iframe');
element.src = 'http://threejs.org/';
element.style.width = '100px';
element.style.height = '100px';

var object = new THREE.CSS3DObject(element);
scene.add(object);

renderer = new THREE.CSS3DRenderer({ preserveDrawingBuffer: true });
window.open( renderer.domElement.toDataURL( 'image/png' ), 'screenshot' );

[mrdoob]

Nope...

[nebeleh]

Do you know of any method which let's me take a screenshot from a rendered iframe?

[gero3]

Nope, @nebeleh.

This is done for security reasons. A screen shot would allow a new attack vector in the browser. So that is why browsers don't implement it.
For more information, getScreenshot

[vgheorghiu]

How would you adjust the code to take multiple screenshots in a row?

[donmccurdy]

@vgheorghiu please use the forums (https://discourse.threejs.org/) or Stack Overflow for help.