将HTML Canvas保存为没有客户端浏览器的图像

Question

我在加载页面时在几个重叠的画布上生成图像（没有用户交互），但是完全绘制需要大约3秒钟。我想展平这些画布，并将此图像转换为服务器上的PNG，以用于缩略图预览。

展平到单个画布（使用ctx.drawImage（other_canvas，0,0））然后ctx.toDataUrl（）看起来就像我需要的那样。有没有办法在服务器端执行此操作而无需用户的浏览器？也许是某种命令行javascript / canvas解析器，它可以加载页面，等待画布完成渲染，然后注入一些javascript来展平，调用toDataUrl，调整大小并保存生成的图像。

呈现缩略图并将缩略图发送回服务器的AJAX解决方案无法正常工作，因为在第一个人查看页面之前我需要缩略图。它也需要很快（希望只比画布渲染时间略长，3秒）。我迫不及待地想要像browsershots这样的外部服务。

我查看了CutyCapt，但这会渲染整个网页，而不仅仅是画布（并且由于某些原因，似乎也没有在我的画布上绘制所有内容）。

感谢。

Answer 1

查看PhantomJS这是webkit浏览器的命令行版本，你可以做一些很酷的事情，例如在图像中保存渲染页面的输出等.AFAIK你也可以注入javascript代码，这可以让你在更多时候控制用它来截取屏幕截图。

http://phantomjs.org/

Answer 2

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

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

Answer 3

PHP有various libraries用于服务器端图像生成，它提供与HTML5画布类似的功能。