Захватить HTML холст стороннего сайта в виде изображения из командной строки

Question

Я знаю, что можно использовать такие инструменты, как wget или curl для выполнения HTTP-запросов из командной строки, или использовать HTTP-запросы клиентов из различных языков программирования. Эти инструменты также поддерживают выборку изображений или других файлов, на которые есть ссылки в коде HTML.

Я ищу механизм, который также выполняет JavaScript той веб-страницы, которая отображает изображение в HTML холст. Затем я хочу извлечь это изображение в виде файла изображения. Цель, которую нужно достичь, - получить временные ряды этих изображений, например, карты погоды или другие диаграммы, которые отображают изменяющиеся во времени данные в постоянный объект DOM, с помощью задания cron.

Я бы предпочел решение, которое работает из скрипта. Как это можно сделать?

Answer 1

Вы можете использовать puppeteer , чтобы загрузить страницу внутри безголового chrome экземпляра

• Откройте страницу и дождитесь ее загрузки
• Использование страницы .evaluate возвращает dataUrl холста
• . Преобразование dataUrl в буфер и запись результата в файл

.

const puppeteer = require('puppeteer');
    const fs = require('fs');

    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto('https://games.novatoz.com/jigsaw-puzzle');

        const dataUrl = await page.evaluate(async () => {
            const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));

            await sleep(5000);

            return document.getElementById('canvas').toDataURL();
        });

        const data = Buffer.from(dataUrl.split(',').pop(), 'base64');

        fs.writeFileSync('image.png', data);
        await browser.close();
    })();