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

Question

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

我正在寻找的是一种机制，它也执行该网页的 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(); })();