使用 JavaScript 捕获应用程序屏幕

Capturing application screen with JavaScript

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

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

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

是的,有了 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

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

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

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

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

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

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