Puppeteer - How to pass a function inside evaluate method that can use htmlElements?

Question

I have a nodeJS discord bot that generate a gif and return it to client. But I want to use puppeteer in order to generate it faster using my gpu. In order to do that, I try to pass the canvas generated in the evaluate function of puppeteer, but inside my function, the canvas doesn't exist anymore.

How to pass the function and have access to the canvas in html ?

Code:

async useCanvas() {
    let result = null;

    if (browser === null) await this.openBrowser();

    const ua = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36";
    const page = await browser.newPage();
    try {
        await page.setExtraHTTPHeaders({'Accept-Language': 'en-US,en;q=0.9'});
        await page.setUserAgent(ua);
        await page.setJavaScriptEnabled(true);

        await page.goto("http://perdu.com");
        await page.waitForSelector('body');
        await page.exposeFunction("func", async (canvas) => console.log(canvas))

        result = await page.evaluate(async () => {
            const canvas = document.createElement("canvas");
            document.body.appendChild(canvas);
            await func(canvas);
        });
    } catch (e) {
        console.log(e);
    }

    await page.close();

    return result;
}

The console log display {}.

I'm quite sure `canvas` is passed correctly, but the comments in `useCanvas` seem to suggest it does its job asynchronously. Do you return a promise there? It might be useful to share a bit of the code you have there to see what this function returns and what it still does *after* it returned. — trincot, Feb 16 '22 at 14:28
@trincot I have test by only do a console log, and this do the same. I have updated the question. — Tryliom, Feb 16 '22 at 16:14
Now it is something different. Here `useCanvas` no longer has an argument. I see `exposeFunction` is a puppeteer thing. I have no experience with that. — trincot, Feb 16 '22 at 16:20
@trincot ExposeFunction is used for an external function, this is the only way to pass a function inside the evaluate block. the console log is used in the same way than my another function who used the canvas. — Tryliom, Feb 16 '22 at 16:23
Does this answer your question? [Why can't I access 'window' in an exposeFunction() function with Puppeteer?](https://stackoverflow.com/questions/48281130/why-cant-i-access-window-in-an-exposefunction-function-with-puppeteer) — ggorlen, Feb 17 '22 at 16:45
You can't pass HTML DOM nodes from the window back into Puppeteer/Node. They're serialized and deserialized with `JSON.parse(JSON.stringify())` and complex DOM nodes don't survive the journey. This smells like a [xy problem](https://meta.stackexchange.com/a/233676/399876) -- what are you really trying to accomplish? Can you use [node canvas](https://github.com/Automattic/node-canvas) directly instead of trying to use Puppeteer to grab a browser canvas? — ggorlen, Feb 17 '22 at 16:49
@ggorlen I actually use node canvas, but this is very slow when you need to generate complex gif, so I try to make it faster using pupeteer using gpu from the browser. — Tryliom, Feb 21 '22 at 13:20

score 0 · Answer 1 · answered Feb 22 '22 at 17:16

The only way I know how to make this work is to pass in a path to a file that contains your function to puppeteer. The way to do this is the following:

Set up a file with your evaluate function:

// evaluate.js
window.yourCustomFunction = () => {
  // your logic here
}

Add a script tag to your page and calling the function within evaluate:

// page.js
await page.addScriptTag({ path: 'path/to/your/script/' });

const result = await page.evaluate(() => {
   return window.yourCustomFunction();
})

Puppeteer - How to pass a function inside evaluate method that can use htmlElements?

1 Answers1