帆布绘图不加载在木偶操纵者

Question

I need to generate snapshots for seo. I am using puppeteer(headless chrome) for this purpose. On main page i have a canvas, on which i start to draw once the component has mounted (my main site is in react).

Issue is that when i get the html from puppeteer, the drawing on the canvas is not there.

In puppeteer code i wait till the content is not loaded.

html = await page.content()

How can i make puppeteer wait till the point canvas is not painted.

Answer 1

page.content will only return the HTML representation of the DOM. To get the actual image of a canvas inside the DOM, you can use the function toDataURL . This will return the image that is shown in a base64-encoded string.

Code sample

const dataUrl = await page.evaluate(() => {
    const canvas = document.querySelector("#canvas-selector");
    return canvas.toDataURL();
});

// dataUrl looks like this: "data:image/png;base64,iVBORw..."
const base64String = dataUrl.substr(dataUrl.indexOf(',') + 1); // get everything after the comma
const imgBuffer = Buffer.from(base64String, 'base64'); // 
fs.writeFileSync('image.png', imgBuffer);

The evaluate call will return the base64 encoded buffer of the image. You need to first remove the "data:...," from that and then you can put that into a buffer. The buffer can then be saved (or handled in any other way).