Render the output to an image

[koraysels]

is it possible to grab a frame and rasterize/output it as an image?
for example to share the current image on facebook? I tried using phantomjs but I get a WebGL error

phantom stdout: ReferenceError: Can't find variable: WebGLFramebuffer

This is probably because PhantomJs does not support webgl..

[brianchirls]

Nothing here is going to work without support for webgl. You need this to run outside of a browser?

[koraysels]

wow quick response, awesome!
No it does not have to run outside a browser. I have a webapp hosted on heroku and I want users to save their image. So anything will do actually :-)

[brianchirls]

Oh yeah that's not a problem. You can grab it straight from the canvas itself with toDataURL, as in this example:
http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server

It shouldn't matter whether the canvas has a 2d context or webgl. It's up to you to convert the resulting dataURI into a file, either on the server or in the browser, but that's easy enough. A little Googling should find you a solution or two.

[darkyen]

If you really really want an image like a blob which the user can save out of the box, you can try using .toBlob on a supporting browser you can also specify quality of jpeg image created.

[darkyen]

On a second thought though @brianchirls having a direct method / output form which literally emits a file sounds pretty reasonable

.target(fileNode);
// and later
fileNode.getFile(); // async call gets the rendered file..

Not that it was hard to write self but it can be cool to have.