How do you save an image from a Three.js canvas?

Question

How do you save an image from a Three.js canvas? I'm attempting to use Canvas2Image but it doesn't like to play with Threejs. Since the canvas isn't defined until it has a div to attach the canvas object to. http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

Accepted Answer

Since the toDataURL is a method of canvas html element, that will work for 3d context too. But you have to take care of couple of things.

Make sure when the 3D context is initialized you set `preserveDrawingBuffer` flag to true, like so:

```
var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
```

Then user `canvas.toDataURL()` to get the image

In threejs you would have to do the following when the renderer is instantiated:

```
new THREE.WebGLRenderer({
    preserveDrawingBuffer: true 
});
```

Also, keep in mind this can have performance implications. (Read: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)

This is only for webgl renderer, in case of threejs canvasRenderer though, you can simply do `renderer.domElement.toDataURL();` directly, no initialization parameter needed.

My webgl experiment: http://jsfiddle.net/TxcTr/3/ press 'p' to screenshot.

Props to gaitat, I just followed the link in his comment to get to this answer.

How do you save an image from a Three.js canvas?

Solution

Problem