javascript - 从命令行将第三方网站的 HTML Canvas 捕获为图像

Question

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

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

我更喜欢通过脚本运行的解决方案。这怎么能做到呢？

Answer 1

您可以使用puppeteer在 headless Chrome 实例中加载页面

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