puppeteer: Get base64 encoded image without separate download

Yes, you can use response.buffer() to get the buffer of a resource. You can then turn the buffer into a base64-encoded string by using buffer.toString('base64').

Code Sample

The following example goes to the google.com website, waits for the first PNG resource and then prints its base64-encoded image.

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();
})();

This code sample waits for a single resource. Alternatively, you could listen to the response event to download multiple images in the same way.


another solution is:

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