Захват экрана приложения с помощью JavaScript

Question

Можно ли сделать снимок всего окна в виде скриншота с помощью JavaScript? Приложение может содержать много iframes и div, где контент загружается асинхронно.

Я исследовал canvas2image, но он работает с html-элементом, используя те же самые отбрасываемые любые iframe, присутствующие на странице.

Я ищу решение, при котором захват позаботится обо всех присутствующих фреймах.

Answer 1

Веб-страницы не являются лучшими вещами для «скриншотов» из-за их природы; они могут включать в себя асинхронные элементы, кадры или что-то в этом роде, они обычно реагируют и т. д. *

Для вашей цели лучше всего использовать внешний API или внешний сервис, я думаю, что не стоит пытаться делать это с JS.

Вы должны попробовать https://www.url2png.com/

Answer 2

Единственный способ захвата содержимого iframe с использованием ТОЛЬКО JavaScript на веб-странице (без расширений или в приложении, работающем вне браузера в пользовательской системе) - это использовать API-интерфейс HTMLIFrameElement.getScreenshot() в Firefox. , Этот API не является стандартным и работает ТОЛЬКО в Firefox.

Для любого другого браузера нет. Обычно iframe помещается в «песочницу», и поэтому он недоступен для браузера с дизайном .

Лучший способ получить снимок экрана с найденной и использованной веб-страницей - это экземпляр Headless Chrome или Headless Firefox . Они сделают скриншот всего на странице, так же, как это увидит пользователь.

Answer 3

Да, с кукловодом это возможно.

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

Источник