Как мне сделать скриншоты каждой динамически загружаемой страницы, используя Express и Puppeteer?

Question

Я создаю приложение, в котором я хочу генерировать изображения QR-кодов вместе с некоторым другим текстовым контентом, который будет генерироваться динамически [с использованием библиотеки qrcode]. Этот QR-код будет отображаться в конечной точке с помощью шаблонов PugJS и ExpressJS. Я должен сохранить сохранить изображение этого рендеринга экрана, который я делаю с помощью Puppeteer. Это прекрасно работает, когда вы генерируете один QR-код и делаете снимок или делаете несколько снимков одного QR-кода. Мне нужно сгенерировать QR-код, сделать его снимок, затем сгенерировать следующий QR-код, сделать его снимок и т. Д.

Проблема, с которой я сталкиваюсь, заключается в том, что с PuppeteerФункция драйвера является асинхронной по своей природе, и я думаю, что могу сделать несколько снимков экрана, если поместить ее в цикл for, а затем выполнить, как показано в приведенном ниже коде. Но это не работает для больших значений i (= 100), так как мы по сути создаем хром без головы каждый раз, когда я выполняю итерацию, и выдает следующую ошибку:

   (node:34536) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added. Use emitter.setMaxListeners() to limit
   (node:34536) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit

Я попытался поставить цикл for послеэкспресс-метод get и перед рендерингом для уменьшения загрузки памяти я попытался изменить поток выполнения в асинхронном коде.

   const express = require('express');
   const JsBarcode = require('jsbarcode');
   const { Canvas } = require("canvas");
   const app = express();
   const port = process.env.PORT || 3000;
   const QRCode = require('qrcode')
   const puppeteer = require('puppeteer');
   app.set('view engine', 'pug');
   app.use(express.static(__dirname + '/public'));

var renderdeet;

for (let i = 0; i < 5; i++){QRCode.toDataURL(process.env.QR_CODE_URL+'sku_type'+process.env.QR_CODE_SUFFIX+'item', function(err, url) {
        renderdeet = { item: 'ANYTHING'+i, packingDate:'17-10-2019', type: 'ABC', batch: 'COR01288C', net_qty: '50g', qrCode: url }
    }) 

    app.get('/generateLabel', (req, res) => {
        res.render('index', renderdeet);  
    }
    );
    (async ()=> {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto('http://localhost:5150/generateLabel');
        const dimensions = await page.evaluate(() => {
            return {
              width: document.body.clientWidth,
              height: document.body.clientHeight,
              deviceScaleFactor: 1
            };
          });
          await page.setViewport(dimensions)
        await page.evaluate(() => document.body.style.background = 'transparent');
        await page.screenshot({path: 'outputs/example'+i+'.png', omitBackground: true});
        await browser.close();
      })();
}

    app.listen(port, () => {
    console.log(`listening on port ${ port }`);
    });

Ожидаемый результат - получение 100 изображений в выходной папке, причем каждое изображение имеетдругой QR-код и информация о маркировке.

Фактически, в памяти есть ошибка памяти (при использовании этого метода) или вообще не появляется скриншот из-за проблем с функциями кукловода

Answer 1

Вы создаете и выполняете функцию внутри forloop, вам нужно создать асинхронную функцию вне цикла for, а затем выполнить с помощью await внутри цикла for.

Во-вторых, вы должны открыть браузер один раз перед началом цикла, а затем использовать экземпляр страницы для цикла.

Обязательно закрыть браузер после завершения цикла.

Структурабудет как:

{libraries}

{Start Browser and save it in a variable}

{loopstart}
    await myfunc(page)
{loopend}

{close browser}

{async myfun(page){}}