帆布繪圖不加載在木偶操縱者

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:...," ，然后將其放入緩沖區。 然后可以保存緩沖區（或以任何其他方式處理）。