0

Запускаю браузер с помощью playwright, потом хочу сделать скриншот элемента с помощью html2canvas. В примере пишу только все связанное с html2canvas и его передачей в браузер playwright

const { default: html2canvas } = require("html2canvas");
const screenshot = await page.evaluate((html2canvas) => {
           var x = html2canvas(document.getElementById(`id("fear-and-greed-dial")`)).then(function(canvas) {
              canvas.toDataURL();              
              document.getElementById("screen").appendChild(my_screen);
                var imgUrl = canvas.toDataURL ("image / png"); 
                return imgUrl;
        } );
        return x;
        });

Вылетает с ошибкой html2canvas is not a function. Но как передать функцию?

3
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 24 окт 2022 в 12:02
  • На какую именно строку ругается?
    – SwaD
    24 окт 2022 в 12:03
  • @SwaD ругается на вторую по счету, говорит, что html2canvas is not a function 24 окт 2022 в 13:09

1 ответ 1

0

Вариант первый, попробовать передать функцию в качестве зависимости

const { default: html2canvas } = require("html2canvas");

const screenshot = await page.evaluate(async (html2canvas) => {
  var x;
  await html2canvas(document.getElementById(`id("fear-and-greed-dial")`)).then(function(canvas) {
    canvas.toDataURL();
    document.getElementById("screen").appendChild(my_screen);
    var imgUrl = canvas.toDataURL ("image / png");
    //return imgUrl;
    x = imgUrl;
  } );
  return x;
}, html2canvas);

Если не сработает, то отказаться от зависимости и просто использовать html2canvas внутри page.evaluate

Так же обратите внимание, что из .then() return не сработает и html2canvas асинхронная функция

const { default: html2canvas } = require("html2canvas");

const screenshot = await page.evaluate(async () => {
  var x;
  await html2canvas(document.getElementById(`id("fear-and-greed-dial")`)).then(function(canvas) {
    canvas.toDataURL();
    document.getElementById("screen").appendChild(my_screen);
    var imgUrl = canvas.toDataURL ("image / png");
    //return imgUrl;
    x = imgUrl;
  } );
  return x;
});
3
  • и в первом и во втором случае ошибка: html2canvas is not defined я попробовал все содержимое файла html2canvas.js загнать в переменную внутри page.evaluate. но получаю html2canvas is not a function функция в яваскрипт может быть переменной, но переменная не может быть функцией? 24 окт 2022 в 20:04
  • Переменная может быть функцией. Кстати, попробуйте заменить импорт const html2canvas = require("html2canvas")
    – SwaD
    24 окт 2022 в 20:15
  • заменил, function is not defined да, нашел информацию - переменная может стать функцией const html2canvas = new Function(html2canv); //в последней переменной весь код но эта библиотека содержит несколько функций, и передавать ее целиком похоже было тупиковым путем. в данном случае пишет Cannot read properties of undefined (reading 'then') сам код библиотеки обфусцирован. наверное, надо написать разработчикам playwright, задача оказалась нетривиальной 24 окт 2022 в 20:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.