使用Chrome开发者工具抓取Chrome浏览器的截图？

Question

使用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);
   }

上述代码运行良好，首先弹出一个窗口，然后加载URL。理想情况下，我想做的下一件事是抓取已加载网页的屏幕截图。目前，这些浏览器窗口弹出到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"弹出的窗口没有被遮挡且获得焦点就可以正常工作。但是，如果有另一个窗口遮挡了一部分，就会出现未被渲染的黑色区域。

谢谢！

- AWT

Answer 1

Chrome 远程调试协议现在支持 Page.captureScreenshot 函数。

以下是 coffee-script 的示例：

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()

（摘自https://github.com/TeamMentor/TM_4_0_Design/blob/Issue_80_Jade_Cleanup/QA/API/QA-TM_4_0_Design.coffee#L54的代码片段）

- Dinis Cruz

---

链接已失效 :( 如何访问/创建“Page”对象？ - user2561747

嗨，看起来那个分支不再存在了请查看以下链接：https://github.com/TeamMentor/TM_4_0_Design/blob/94612a699aa03565bea6c045400bccd1cc68dd76/QA/API/QA-TM_4_0_Design.coffee#L56和https://github.com/TeamMentor/TM_4_0_Design/blob/94612a699aa03565bea6c045400bccd1cc68dd76/QA/tests/help-pages.coffee#L40 - Dinis Cruz

这里是否有适用于只想将命令粘贴到控制台窗格或按热键的人可用的东西？ - Pysis

Answer 2

试试这个 Aviary屏幕截图

也可以看看这个网站：

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

- Adel Boutros

---

嗨，Adel，我研究了一下Aviary，它有一些有趣的选项和公共API，但是该API面向图像编辑。我没有看到任何可以让我以编程方式截取屏幕截图的东西，所以我的搜索还在继续。谢谢！ - AWT

@torgis 希望你找到了你想要的！ - Adel Boutros

我发现了一些有趣的东西，但没有一个完全符合我的要求。因此，我正在编写自己的程序。祝我好运！ :) - AWT

@torgis 如果你需要帮助，你随时可以回到这里 :) - Adel Boutros

Answer 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

- user452425