Question

假设我有Url列表或SVG文件的完整路径，现在我想逐个为每个Urls截取屏幕截图。

这是测试代码，我用来逐个截取屏幕截图，但它没有按预期工作！

此代码只为所有网址开始无头的chrome页面实例，而node.js会抛出此错误

（node：3412）MaxListenersExceededWarning：可能的EventEmitter内存检测到泄漏。添加了11个生命周期事件监听器。使用 emitter.setMaxListeners（）增加限制

但我想逐个截取屏幕截图。

'use strict';

const fs        = require('fs');
const glob      = require('glob');
const validUrl  = require("valid-url")
const puppeteer = require('puppeteer');
const devices   = require('puppeteer/DeviceDescriptors');
const iPhone    = devices['iPhone 6'];

/**
 * Loading Application Config
 */
const inputUrl = 'http://www.google.com';

/**
 * Using Puppeteer.js
 */
console.log('-- Trying to Launch Puppeteer');
const browser = puppeteer.launch({
    headless: true
}).then(function(browserObj)
{
    console.log('-- Trying to Open New Page');
    browserObj.newPage().then(function(pageObj)
    {
        async function closeHeadlesssChrome(browserObj) {
            console.log('-- Trying to Close Chome Headless Window');
            await browserObj.close();
        }

        async function setChromeViewport(pageObj) {
            console.log('-- Trying to Update page viewPort');
            await pageObj.setViewport({
                width: 1366,
                height: 738,
                deviceScaleFactor: 1,
                isMobile: false,
                hasTouch: false,
                isLandscape: false
            });
        }

        var takeScreenshot = async function(pageObj, srcUrl) {
            console.log('-- Trying to Load Web Page ' + srcUrl);
            await pageObj.goto(srcUrl);

            console.log('-- Trying to Take Screenshot');
            await pageObj.screenshot({
                path: srcUrl + '.png',
                clip: {
                    x: 0,
                    y: 0,
                    width: 795,
                    height: 1125
                }
            })
        }


        // Input or Source Url
        const inputUrl = "C:/Users/ssp/Music/BR PUBLIC INTER COLLEGE";
        var matchedFiles = [];

        // Check if given Url/Path exists
        if (fs.existsSync(inputUrl)) 
        {
            const inputUrlObj = fs.statSync(inputUrl);
            if (inputUrlObj.isDirectory()) 
            {
                matchedFiles = glob.GlobSync(inputUrl + '/**/*.svg').found;
            } 
            else if (inputUrlObj.isFile()) 
            {
                matchedFiles.push(inputUrl );
            }
        } 
        else 
        {
            console.log('-- Input Url not exists')
            return closeHeadlesssChrome(browserObj);
        }

        setChromeViewport(pageObj);

        matchedFiles.map(function(srcUrl){
            takeScreenshot(pageObj, srcUrl);
        });
    });
});

由于

Answer 1

将for..of与async-await一起使用，而不是.map。 .map暂停执行但await会暂停执行。

browserObj.newPage().then(async function(pageObj) { // <-- turn the main function into async function
 // ... many lines later
 for(let srcUrl of matchedFiles){
  await takeScreenshot(pageObj, srcUrl);
 }

Side-Note：由于你的所有函数都是相互独立的，你可以在调用browserObj.newPage（）之前将它们移到块之外并声明它们。

这是重构的代码，如果出现问题，请原谅，但是你明白了。

"use strict";

const fs = require("fs");
const glob = require("glob");
const validUrl = require("valid-url");
const puppeteer = require("puppeteer");
const devices = require("puppeteer/DeviceDescriptors");
const iPhone = devices["iPhone 6"];

/**
 * Loading Application Config
 */
const inputUrl = "http://www.google.com";

/**
 * Controller functions
 */

async function closeHeadlesssChrome(browserObj) {
  console.log("-- Trying to Close Chome Headless Window");
  await browserObj.close();
}

async function setChromeViewport(pageObj) {
  console.log("-- Trying to Update page viewPort");
  await pageObj.setViewport({
    width: 1366,
    height: 738,
    deviceScaleFactor: 1,
    isMobile: false,
    hasTouch: false,
    isLandscape: false
  });
}

var takeScreenshot = async function(pageObj, srcUrl) {
  console.log("-- Trying to Load Web Page " + srcUrl);
  await pageObj.goto(srcUrl);

  console.log("-- Trying to Take Screenshot");
  await pageObj.screenshot({
    path: srcUrl + ".png",
    clip: {
      x: 0,
      y: 0,
      width: 795,
      height: 1125
    }
  });
};

function getURLList() {
  // Input or Source Url
  const inputUrl = "C:/Users/ssp/Music/BR PUBLIC INTER COLLEGE";
  var matchedFiles = [];

  // Check if given Url/Path exists
  if (fs.existsSync(inputUrl)) {
    const inputUrlObj = fs.statSync(inputUrl);
    if (inputUrlObj.isDirectory()) {
      matchedFiles = glob.GlobSync(inputUrl + "/**/*.svg").found;
    } else if (inputUrlObj.isFile()) {
      matchedFiles.push(inputUrl);
    }
    return matchedFiles;
  }
}

/**
 * Using Puppeteer.js
 */

(async () => {
  // get url list
  const matchedFiles = getURLList();
  if (!matchedFiles) {
    console.log("-- Input Url not exists");
    // if there is no url, then no need to even launch the browser and waste resources
    return;
  }

  console.log("-- Trying to Launch Puppeteer");
  const browserObj = await puppeteer.launch({
    headless: true
  });

  console.log('-- Trying to Open New Page');
  const pageObj = await browserObj.newPage();

  console.log('-- Change Viewport');
  await setChromeViewport(pageObj);

  console.log('-- Run thru the url list');
  for (const srcUrl of matchedFiles) {
    await takeScreenshot(pageObj, srcUrl);
  }
})();

使用Puppeter.js截取Urls列表的屏幕截图

1 个答案: