puppeteer: Get base64 encoded image without separate download

Question

On a page that does not support downloading images or opening them in new tab, I can use the Chrome Developer (Tools->Network) to right click the image and do "copy image as URI".

Is it possible to do the same with puppeteer?

I tried to use few Node.js modules that are intended to convert an image to its base64 representation but they all seem to download the image and then return base64 representation.

Yes, but I can't download it, can't redirect to http of that image. Page that host image reports error when trying to save or open in new tab, I tried to get URI in puppeteer but base64 I get is encoded error from page, not image. — im-i0dum, Aug 29 '19 at 13:05

score 29 · Answer 1 · answered Jan 21 '20 at 12:58

29

another solution is:

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

answered Jan 21 '20 at 12:58

Italo José

1,558
1
17
50

score 18 · Accepted Answer · answered Aug 29 '19 at 16:55

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.

score 1 · Answer 3 · answered Sep 21 '21 at 12:19

Following worked for me

  let screenshot = await page.screenshot({ encoding: "base64" }).then(function(data){
            let base64Encode = `data:image/png;base64,${data}`;
            return base64Encode;
    });

you can use that in addcontext - it will add in mochareport

addContext(this, {
    title: 'screenshot ',
    value: global.backEndData.contactCountTotalImage,
  });

puppeteer: Get base64 encoded image without separate download

3 Answers3