Рисунок холста не загружается в кукловода

Question

Мне нужно создать снимки для SEO.Я использую кукловод (хром без головы) для этой цели.На главной странице у меня есть холст, на котором я начинаю рисовать после монтирования компонента (мой главный сайт находится в реакции).

Проблема в том, что когда я получаю HTML от кукловода, рисунок на холстене там.

В коде кукловода я жду, пока содержимое не будет загружено.

html = await page.content()

Как я могу заставить кукловода ждать, пока холст точки не будет нарисован.

Answer 1

page.content вернет только HTML-представление DOM.Чтобы получить реальное изображение холста внутри 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:...," из этого, а затем вы можете поместить это в буфер.Затем буфер может быть сохранен (или обработан любым другим способом).