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

Question

我需要为seo生成快照。 为此，我正在使用木偶（无头铬）。 在主页面上我有一个画布，一旦组件安装就开始画画（我的主站点在反应中）。

问题是，当我从puppeteer获取html时，画布上的绘图不存在。

在puppeteer代码中我等到内容未加载。

html = await page.content()

我怎样才能使木偶操纵者等到画布没有涂上。

Answer 1

page.content只返回DOM的HTML表示形式。 要获取DOM内部画布的实际图像，可以使用函数toDataURL 。 这将返回以base64编码的字符串显示的图像。

代码示例

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

evaluate调用将返回图像的base64编码缓冲区。 您需要先从中删除"data:...," ，然后将其放入缓冲区。 然后可以保存缓冲区（或以任何其他方式处理）。