Node.js 如何使用Express和Puppeter拍摄每个动态加载页面的截图？

我正在创建一个应用程序，我想在其中生成二维码图片以及一些其他文本内容，这些内容将[使用二维码库]动态生成。该二维码将在PugJS模板和ExpressJS的帮助下呈现到端点。我必须保存这个渲染屏幕的图片，我正在使用木偶演员。当生成一个二维码并拍摄快照，或拍摄一个二维码的多个快照时，这种方法非常有效。我要找的是生成一个二维码，拍摄它的快照，然后生成下一个二维码，拍摄它的快照，等等

我在这方面面临的问题是，由于木偶驱动程序函数本质上是异步的，所以我认为我可以拍摄多个屏幕截图的唯一方法是将其放入for循环中，然后按照下面的代码执行。但这对较大的i（=100）值不起作用，因为每次迭代时，我们基本上都在创建一个无头chrome，并给出以下错误：

   (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”express方法之后，在渲染之前减少内存负载，我尝试在异步代码中更改执行流

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

const express=require（'express'）；
const JsBarcode=require（'JsBarcode'）；
const{Canvas}=require（“Canvas”）；
常量app=express（）；
const port=process.env.port | 3000；
常量QRCode=require（'QRCode'）
const puppeter=require（'puppeter'）；
应用程序集（“查看引擎”、“帕格”）；
app.use（express.static（uu dirname+/public））；
var renderdeet；
对于（设i=0；i<5；i++）{QRCode.toDataURL（process.env.QR\u CODE\u URL++'sku\u type'+process.env.QR\u CODE\u后缀+'item'，函数（err，URL）{
RenderNet={item:'ANYTHING'+i，打包日期：'17-10-2019'，类型：'ABC'，批次：'COR01288C'，净数量：'50g'，qrCode:url}
}) 
app.get（'/generateLabel'，（req，res）=>{
res.render（“索引”，renderdeet）；
}
);
（异步（）=>{
const browser=wait puppeter.launch（）；
const page=wait browser.newPage（）；
等待页面。转到（'http://localhost:5150/generateLabel');
常量维度=等待页面。评估（（）=>{
返回{
宽度：document.body.clientWidth，
高度：document.body.clientHeight，
设备比例系数：1
};
});
等待页面。设置视口（尺寸）
等待page.evaluate（（）=>document.body.style.background='transparent'）；
等待page.screenshot（{path:'outputs/example'+i+'.png'，省略background:true}）；
等待浏览器关闭（）；
})();
}
应用程序侦听（端口，（）=>{
log（`listing on port${port}`）；
});

预期结果是在outputs文件夹中获得100张图片，每张图片都有不同的二维码和标签细节

---

在实际结果中，要么是内存错误（使用此方法），要么是由于木偶程序函数出现问题而根本无法获取屏幕截图

您正在forloop内部创建和执行一个函数，您需要做的是在for循环外部创建异步函数，然后使用Wait inside for循环执行

其次，在开始循环之前，您应该打开浏览器一次，然后在for循环中使用页面实例

确保在循环结束后关闭浏览器

结构如下：

{libraries}

{Start Browser and save it in a variable}

{loopstart}
    await myfunc(page)
{loopend}

{close browser}

{async myfun(page){}}

---

嗨，我以前试过这个，但我就是无法执行。请用实际代码替换{Start Browser并将其保存在变量}{loopstart}wait myfunc（page）{loopend}{close Browser}{async myfun（page）{}中好吗？