使用JavaScript捕获应用程序屏幕

Question

是否可以使用JavaScript将整个窗口捕获为屏幕截图？ 该应用程序可能包含许多iframe和div，这些内容是异步加载的。

我已经研究过canvas2image，但是它可以在html元素上工作，使用相同的元素会丢弃页面上存在的所有iframe。

我正在寻找一种解决方案，其中捕获将处理所有存在的iframe。

Answer 1

仅在网页中使用JavaScript捕获iframe内容的唯一方法（无扩展名，或在用户系统的浏览器外部运行的应用程序）是使用Firefox中的HTMLIFrameElement.getScreenshot() API。该API是非标准的，仅在Firefox中可用。

对于任何其他浏览器，不可以。 iframe通常是沙盒，因此浏览器by design无法访问它。

获取已找到并使用的网页的屏幕截图的最佳方法是Headless Chrome或Headless Firefox的实例。这些将截取页面上所有内容的屏幕快照，就像用户看到的一样。

Answer 2

是的，这是可能的。

1-只需安装依赖项：

npm i puppeteer-core

2-创建JavaScript文件screenshot.js

const puppeteer = require('puppeteer');

(async () => {

   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://yourweb.com');
   await page.screenshot({path: 'screenshot.png'});

   await browser.close();
})();

3-运行：

node screenshot.js

Source

Answer 3

由于网页的性质，它们并不是最好的“屏幕快照”；它们可以包含异步元素，框架或类似内容，它们通常是响应式的……

出于您的目的，最好的方法是使用外部api或外部服务，我认为尝试使用JS并不是一个好主意。

您应该尝试https://www.url2png.com/