2

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.

4

3 回答 3

1

查看 PhantomJS，它是 webkit 浏览器的命令行版本，您可以做一些很酷的事情，例如将渲染页面的输出保存在图像中等。AFAIK 您还可以注入 javascript 代码，这可以让您更好地控制何时采取截图。

http://phantomjs.org/

于 2013-04-17T15:20:46.710 回答
1

您可能想看看 Phantomjs： https ://github.com/ariya/phantomjs/wiki/Screen-Capture

这可以很好地将 html 内容呈现为 PNG，尽管这也可以用于整个页面。也许您可以将您感兴趣的画布内容包装在一个单独的页面中，然后使用 phantomjs 将其转换为 png。

于 2013-04-17T15:26:12.860 回答
0

PHP 有各种用于服务器端图像生成的库，它们提供类似于 HTML5 画布的功能。

于 2013-04-17T15:19:35.907 回答