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

Is it possible to take a screenshot of the rendered DOM on the server side?

本文关键字：DOM 屏幕截图截取服务器端是否更新时间：2023-09-26

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

由于缩略图应该在 200x200 像素左右，而原始标记打算在 900x900 像素左右查看，因此我必须找到一种方法来"缩放"该标记：这应该就像我以 900 像素的渲染标记截图并将其缩小到 200 像素一样。

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

编辑：我想某种混搭，在客户端截取屏幕截图，然后发送到服务器也可以。

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

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

在 PHP jpg/png/gif 中动态缩放图像
如果图像太小，请使用 PHP 调整图像大小

你可能想在PHP中HTML2PDF查看我对这个问题的回答 - 转换实用程序和脚本 - 示例和演示，也许它也对你有帮助。

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

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

但是，这只是使用PHP的网站屏幕截图的副本

如果你想截取用户看到的内容，你必须使用一些客户端技术。我想你应该能够用闪光灯做到这一点。

这个答案可能会帮助你：使用 HTML5/Canvas/JavaScript 截取屏幕截图

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

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

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

干杯

我为此使用了 http://www.websupergoo.com/的ABCpdf，似乎运行良好，但它是商业产品，尽管它带有免费试用期。我不隶属于这家公司。