使用 Chrome 开发者工具截取 Chrome 的屏幕截图？答案

【问题标题】：Grab a screenshot of Chrome using Chrome Developer Tools?使用 Chrome 开发者工具截取 Chrome 的屏幕截图？
【发布时间】：2012-01-27 22:35:56
【问题描述】：

是否可以使用 Chrome 开发工具远程调试器截取打开窗口的屏幕截图？

例如，我连接到远程调试端口，我有这个弹出一个空窗口的代码：

   private void sendWindowPop(int width, int height) throws
IOException {
       hsc.send("{\"method\": \"Runtime.evaluate\", \"id\": "
               + hsc.nextInt()
               + ", \"params\": {"
               + "\"expression\":
\"window.open('about:blank','name','toolbar=0,scrollbars=0,"
               + "location=0,status=0,menubar=0,resizable=0,width="
               + width
               + ",height="
               + height
               + "');\""
               + "}}");

（hsc 是我在http://localhost:9222 与调试器的连接）

然后，我用这个加载我的目标 URL：

    private void loadPage(String uriString) throws IOException {
       hsc.send("{\"method\": \"Page.open\", \"id\": " +
       hsc.nextInt() + ", \"params\": {\"url\": \"" + uriString + "\"}}");
       hsc.waitFor(ChromeNotifications.PAGE_LOADEVENTFIRED, DEFAULT_TIMEOUT_MILLIS);
   }

上面的代码工作正常，首先弹出一个窗口，然后加载网址。理想情况下，我想做的下一件事就是截屏加载的网页。现在，这些浏览器窗口弹出 xvfb虚拟桌面，我可以用ImageMagick的导入工具抓取目标窗口的屏幕截图，但仅当它位于前景。

这是一个问题，因为此应用程序旨在运行与弹出到虚拟桌面的多个窗口并行。任何窗口重叠我的目标窗口只会给我一个黑色屏幕截图，因为 Xfvb 只呈现可见的内容。

我还查看了 API 参考 chrome.tabs.captureVisibleTab。没有运气，它无法捕捉到不可见的东西。

有没有办法，使用远程调试器，抓取一个屏幕截图开窗吗？

（仅供参考，我的 ImageMagick 导入命令是这样的）

    DISPLAY=:0.0 import -window "Google - Chromium" screenshot.png

我使用上面的 loadPage() 在我的 chromium 浏览器中打开 URL http://www.google.com。只要弹出的“Google - Chromium”窗口通畅且具有焦点，它就可以很好地工作。将另一个窗口放在它的一部分上，我得到一个没有渲染的大黑色区域。

谢谢！

【问题讨论】：

标签： java debugging google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

Chrome 远程调试协议现在支持 Page.captureScreenshot 功能

这是咖啡脚本中的一个例子

screenshot: (name, callback)=>
    safeName = name.replace(/[^()^a-z0-9._-]/gi, '_') + ".png"
    png_File = "./_screenshots".append_To_Process_Cwd_Path().folder_Create()
                               .path_Combine(safeName)

    @chrome._chrome.Page.captureScreenshot (err, image)->
      require('fs').writeFile png_File, image.data, 'base64',(err)->
         callback()

(sn-p 来自 https://github.com/TeamMentor/TM_4_0_Design/blob/Issue_80_Jade_Cleanup/QA/API/QA-TM_4_0_Design.coffee#L54)

【讨论】：

链接失效:(你如何访问/创建Page对象？
嗨，那个分支好像已经没有了，看看github.com/TeamMentor/TM_4_0_Design/blob/…和github.com/TeamMentor/TM_4_0_Design/blob/…
对于只想在控制台窗格中粘贴命令或按热键的人来说，这里有什么可用的吗？

【解决方案2】：

试试Aviary Screen Capture

也检查这个网站：

http://www.webdesignerdepot.com/2011/08/25-must-have-chrome-extensions-for-web-designers-and-developers/

【讨论】：

嗨 Adel，我研究了 Aviary，它有一些有趣的选项和一个公共 API，但 API 是针对图像编辑的。我没有看到任何可以让我以编程方式截取屏幕截图的内容，因此我的搜索仍在继续。谢谢！
@torgis 我希望你找到了你要找的东西！
我发现了一些有趣的东西，但没有完全符合我的要求。相反，我正在编写自己的。祝我好运！ :)
@torgis 如果您需要帮助，您可以随时回到这里 :)

【解决方案3】：

如果您需要基于 Java 的解决方案，请使用 cdp4j 捕获整页屏幕。

public static void main(String[] args) throws IOException, InterruptedException {
    SessionFactory factory = new Launcher().launch();

    Path file = createTempFile("screenshot", ".png");

    try (Session session = factory.create()) {
        session.navigate("https://webfolder.io");
        session.waitDocumentReady();
        byte[] data = session.captureScreenshot();
        write(file, data);
    }

    if (isDesktopSupported()) {
        getDesktop().open(file.toFile());
    }

    factory.close();
}

Screenshot.java

【讨论】：