使用 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
网页并不是最好的东西 "screenshoted",因为它们的性质;它们可以包含异步元素、框架或类似的东西,它们通常是响应式的等等...
为了您的目的,最好的方法是使用外部 api 或外部服务,我认为尝试使用 JS 不是一个好主意。
在网页中仅使用 JavaScript 捕获 iframe 内容的唯一方法(无扩展,或应用程序 运行 在用户系统的浏览器之外)是使用 HTMLIFrameElement.getScreenshot()
API 在 Firefox 中。此 API 是非标准的,仅适用于 Firefox。
对于任何其他浏览器,没有。 iframe 通常是沙盒化的,因此浏览器无法访问它 by design.
获取我找到并使用的网页屏幕截图的最佳方式是 Headless Chrome or Headless Firefox 的实例。这些将截取页面上所有内容的屏幕截图,就像用户看到的一样。
是否可以使用 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
网页并不是最好的东西 "screenshoted",因为它们的性质;它们可以包含异步元素、框架或类似的东西,它们通常是响应式的等等...
为了您的目的,最好的方法是使用外部 api 或外部服务,我认为尝试使用 JS 不是一个好主意。
在网页中仅使用 JavaScript 捕获 iframe 内容的唯一方法(无扩展,或应用程序 运行 在用户系统的浏览器之外)是使用 HTMLIFrameElement.getScreenshot()
API 在 Firefox 中。此 API 是非标准的,仅适用于 Firefox。
对于任何其他浏览器,没有。 iframe 通常是沙盒化的,因此浏览器无法访问它 by design.
获取我找到并使用的网页屏幕截图的最佳方式是 Headless Chrome or Headless Firefox 的实例。这些将截取页面上所有内容的屏幕截图,就像用户看到的一样。