Как получить скриншот / превью другого веб-сайта

Question

Есть ли способ получить снимок экрана со страниц другого веб-сайта?

например: вы вводите URL-адрес во вводе, нажимаете Enter, и сценарий дает вам снимок экрана с сайтом, который вы добавили. Мне удается сделать это с помощью безголовых браузеров, но я боюсь, что запуск может занять слишком много ресурсов и времени. скажем, фантом js каждый раз, когда используется ввод, браузеру без головы потребуется получить новые данные, я исследую HotJar, он делает что-то похожее на то, что я ищу, но дает вам сценарий, который вы должны вставить заголовок страницы, который меня устраивает, после этого вы получаете предварительный просмотр, как это работает? и как его воспроизвести?

Answer 1

Хотите распечатать экран вашей страницы или чужой?

Собственная страница

Используйте кукольник или фантом JS с Beverly build вашего сайта, таким образом вы будете запускать только его, когда он изменится, и иметь готовый снимок экрана в любое время. в его конвейер сборки и используйте решение сверху.

Или используйте это решение Использование HTML5 / Canvas / JavaScript для создания снимков экрана в браузере .

Вы не Нет доступа

Используйте какой-нибудь длительный процесс, который при запросе выдаст вам снимок экрана.

Представьте себе сервер с одной конечной точкой URL: screenshot.example.com?facebook.com.

У долго работающего сервера есть экземпляр puppeteer / phantom JS, готовый к go, когда ему задан URL-адрес, он заполнит эту страницу, получит снимок экрана и отправит его обратно. Браузер будет воспринимать это как медленный запрос ping-изображения.

Answer 2

Вы можете сделать это с помощью кукловода

установить с помощью: npm i puppeteer

сохраните следующий код в example.js

const puppeteer = require('puppeteer');

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

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

и запустите его с помощью: node example.js