search

brianchirls / Seriously.js

A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
MIT License
3.87k stars 354 forks source link

Render the output to an image #79

Open koraysels opened 9 years ago

koraysels commented 9 years ago

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 commented 9 years ago

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

koraysels commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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.