使用 JavaScript 捕获应用程序屏幕

Question

是否可以使用 JavaScript 截取整个 window 作为屏幕截图？应用程序可能包含许多 iframe 和 div 的异步加载内容。

我探索了 canvas2image 但它适用于 html 元素，使用相同的丢弃页面上存在的任何 iframe。

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

Answer 1

是的，有了 Puppeteer，这是可能的。

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 2

网页并不是最好的东西 "screenshoted"，因为它们的性质；它们可以包含异步元素、框架或类似的东西，它们通常是响应式的等等...

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

你应该试试https://www.url2png.com/

Answer 3

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

对于任何其他浏览器，没有。 iframe 通常是沙盒化的，因此浏览器无法访问它 by design.

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

使用 JavaScript 捕获应用程序屏幕

Capturing application screen with JavaScript

javascript

html

screen-capture

webpage-screenshot