当 JavaScript 中的浏览器内部存在 Promise.all() 时，如何从 Puppeteer 中的 page.evaluate() 返回数据

Question

I want to find average color of all images in the page. I am using Puppeteer to launch chromium and then run javascript inside browser.

Problem is that I am using Promies.all to asynchronously calculate all colors inside browser.

I want to return calculated image colors to page.evaluate. How can I do that? Is it possible?

Following code does not work, because imgcolors is no defined obviously, it is returned inside Promise.all callback.

   const returned = await page.evaluate(async () => {
   const fac = new FastAverageColor();
   const imgs = Array.from(document.querySelectorAll('img'));
   const imgpromises = imgs.map(img => fac.getColorAsync(img.src));


   Promise.all(imgpromises).then(imgcolors => { return imgcolors;});

   return {
     document:{
       height: document.body.scrollHeight, 
       width:document.body.scrollWidth 
     },
     imgcolors:imgcolors
   };
 });

I have tried following:

Promise.all(imgpromises).then(imgcolors => { 
      
      return {
        elements:elements, 
        document:{
          height: document.body.scrollHeight, 
          width:document.body.scrollWidth 
        },
        imgcolors:imgcolors
      };
    });

Now I am not returing data to page.evaluate puppeteer function. So const returned is undefined.

How to do that? Thank you in advance!

Answer 1

In the page.evaluate function, you can return a promise, which will resolve to a value. In this case Promise.all returns a promise, which you can chain to return the value you want. It'd look something like this:

const returned = await page.evaluate(() => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  return Promise.all(imgpromises).then(imgcolors => { 
    return {
      document:{
        height: document.body.scrollHeight, 
        width: document.body.scrollWidth 
      },
      imgcolors: imgcolors
    };
  });
});

Alternatively, since you are using async functions, you can just use the await operator to wait for values to be resolved:

const returned = await page.evaluate(async () => {
  const fac = new FastAverageColor();
  const imgs = Array.from(document.querySelectorAll('img'));
  const imgpromises = imgs.map(img => fac.getColorAsync(img.src));
  const imgcolors = await Promise.all(imgpromises);
  return {
    document:{
      height: document.body.scrollHeight, 
      width: document.body.scrollWidth 
    },
    imgcolors: imgcolors
  };
});

Note that page.evaluate can only return serializable values , ie things that can be JSON.stringify 'd. It looks like imgcolors should be serializable, but in other cases, you might need to convert the values to something serializable.