是否可以在服务器端获取渲染DOM的屏幕截图？

Question

在我的网络应用程序中，用户可以创建一些保存在我的数据库中的HTML / CSS标记。我想为该标记提供一个“缩略图”，例如在概览视图中。

由于缩略图应该在200x200px左右，并且原始标记打算在900x900px左右查看，我必须找到一种方法来“缩放”该标记：它应该就像我拍摄了渲染的截图标记为900px并将其缩小到200px。

有人知道这是否可以使用JavaScript或PHP？或者也许是另一种服务器端语言？我想避免使用任何第三方小程序，如ActiveX。

编辑：我想某种混搭，在客户端拍摄截图，然后发送到服务器也行。

Answer 1

您可以使用WKHTMLTOPDF。它还具有保存图像的功能，称为WKHTMLTOIMAGE（我认为这是一个不同的发行版，但您可以从同一个链接下载它）。您可以使用PHP中的exec()作为系统调用运行它。使用像xvfb这样的虚拟缓冲区，您可以在服务器上运行WKHTMLTOIMAGE无头。它是基于WebKit的，所以产生的结果非常好......

您可以使用标准PHP函数缩放生成的图像，例如在这些帖子中所述：

• dynamically scale images in php jpg/png/gif
• Resize image using PHP if it's too small

您可能想查看我对这个问题HTML2PDF in PHP - convert utilities & scripts - examples & demos的回答，也许这对您有帮助。

Answer 2

最好的办法是将作业分成两部分：制作屏幕截图，然后将其缩小到200x200。对于第一部分，您需要一个命令行工具或库，它可以直接将HTML呈现给位图文件（可能是PNG）;我不知道有什么片刻的通知，但如果你真的有决心，我肯定会在webkit和libpng周围掀起一点包装，如果你知道你在做什么的话，不应该太难。对于扩展，您可以使用gd（在大多数PHP设置上配置）或ImageMagick（更强大）。一旦你有了这两个，只需要写下正确的胶水就可以把它们放在一起。

Answer 3

简而言之，没有“简单”的方法可以做到这一点。

但是，这只是Website screenshots using PHP

的副本

Answer 4

如果您想截取用户看到的内容，您必须使用一些客户端技术。我认为你应该可以用flash做到这一点。

这个答案应该可以帮到你： Using HTML5/Canvas/JavaScript to take screenshots

否则，您可能会尝试在服务器端“重新创建”类似的视图，例如使用WKHTMLTOPDF（正如Michal建议的那样）。

Answer 5

是的，这是可能的，我甚至使用php前端作为服务入口点实现了一个解决方案。实际工作由PhantomJS / Xvfb处理，其中页面被渲染，它执行的javascript（非常重要，包括网络上所有动态生成的内容）。

基本上，使用PhantomJS和Xvfb帧缓冲使这个任务变得非常简单，请在此处查看更多内容：http://code.google.com/p/phantomjs/和http://skookum.com/blog/dynamic-screenshots-on-the-server-with-phantomjs/

干杯

Answer 6

我使用了来自http://www.websupergoo.com/的ABCpdf，似乎工作得很好，但它是一个商业产品，虽然它带有免费试用期。我不隶属于这家公司。