无需客户端浏览器即可将 HTML Canvas 保存为图像

Posted 2023-03-25

【中文标题】无需客户端浏览器即可将 HTML Canvas 保存为图像

【英文标题】：Save HTML Canvas as an image without client browser

【发布时间】：2013-04-10 10:37:32

【问题描述】：

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

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

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

我查看了 CutyCapt，但它呈现了整个网页，而不仅仅是画布（而且由于某种原因似乎也没有在我的画布上绘制所有内容）。

谢谢。

【参考方案1】：

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

这可以很好地将 html 内容呈现为 PNG，尽管这也可以用于整个页面。或许你可以把你感兴趣的canvas内容包装在一个单独的页面中，然后用phantomjs把它变成一个png。

【参考方案2】：

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

http://phantomjs.org/

【参考方案3】：

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

【讨论】：

我想过这个，但这需要我在 PHP 中重新实现我的 js 代码并维护两个版本。