从命令行捕获第三方站点的HTML画布作为图像

Question

我知道可以使用诸如wget或curl之类的工具来从命令行执行HTTP请求，或者使用来自各种编程语言的HTTP客户端请求。这些工具还支持获取HTML代码中引用的图像或其他文件。

我正在寻找的是一种机制，该机制还执行该网页的JavaScript，该JavaScript将图像呈现到HTML画布中。然后，我想将该渲染图像提取为图像文件。要达到的目标是获取这些图像的时间序列，例如天气图或其他通过cron作业将时变数据绘制到恒定DOM对象中的图表。

我更喜欢一种可从脚本运行的解决方案。如何做到这一点？

Answer 1

您可以使用puppeteer将页面加载到无头chrome实例中

• 打开页面并等待其加载
• 使用page.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();
    })();