puppeteer：无需单独下载即可获取 base64 编码的图像

Question

在不支持下载图像或在新选项卡中打开它们的页面上，我可以使用 Chrome 开发人员（工具->网络）右键单击图像并执行“将图像复制为 URI”。

是否可以对 puppeteer 做同样的事情？

我尝试使用一些旨在将图像转换为其 base64 表示的 Node.js 模块，但它们似乎都下载图像然后返回 base64 表示。

Answer 1

另一个解决方案是：

const base64 = await page.screenshot({ encoding: "base64" })

Answer 2

是的，您可以使用它response.buffer()来获取资源的缓冲区。然后，您可以使用 将缓冲区转换为 base64 编码的字符串buffer.toString('base64')。

代码示例

以下示例转到google.com网站，等待第一个 PNG 资源，然后打印其 base64 编码图像。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    const [response] = await Promise.all([
        page.waitForResponse(response => response.url().includes('.png')),
        page.goto('https://www.google.com/')
    ]);
    const buffer = await response.buffer();
    console.log('data:image/png;base64,' + buffer.toString('base64'));

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

此代码示例等待单个资源。或者，您可以收听response事件以相同的方式下载多个图像。