Save HTML Canvas as an image without client browser

Question

I generate an image on a few overlapping canvases when a page is loaded (without user-interaction), but that does take ~3 seconds to fully draw. I want to flatten these canvases, and convert this image to a PNG on the server, for use in thumbnail previews.

Flattening to a single canvas (using ctx.drawImage(other_canvas,0,0)) and then ctx.toDataUrl() looks like exactly what I need. Is there a way do this on the server side without requiring a user's browser? Some kind of command-line javascript / canvas parser perhaps, which can load the page, wait for the canvas to finish rendering, then inject some javascript to flatten, call toDataUrl, resize and save the resulting image.

AJAX solutions which render and send the thumbnail back to the server won't work as I need the thumbnail before the first person has viewed the page. It also needs to be fast (hopefully only slightly longer than the time the canvas takes to render, 3 seconds). I can't wait for an external service like browsershots.

I looked at CutyCapt, but that renders the entire webpage, not just the canvas (and also doesn't seem to draw everything on my canvas for some reason).

Thanks.

Answer 1

You might want to take a look at Phantomjs: https://github.com/ariya/phantomjs/wiki/Screen-Capture

This does a good job of rendering html content to a PNG, although this will also do the entire page. Perhaps you can wrap the canvas contents you are interested in in a separate page and then use phantomjs to turn it into a png.

Answer 2

Look into PhantomJS which is a command line version of the webkit browser and you can do cool things such as save the output of a rendered page in an image etc. AFAIK you can also inject javascript code which can give you more control when to take a screenshot with it.

http://phantomjs.org/

Answer 3

PHP has various libraries for server-sided image generation which offer functionality which is similar to the HTML5 canvas.