Найти наибольшее изображение на сайте, используя Puppeteer

Question

Я использовал Cheerio , чтобы найти самое большое изображение внутри веб-страницы. Вот код, который я использовал:

  const { src } = $('img')
      .map((i, el) => ({
        src: el.attribs.src,
        width: el.attribs.width ? Number(el.attribs.width.match(/\d+/)[0]) : -1,
      }))
      .toArray()
      .reduce((prev, current) => (prev.width > current.width ? prev : current));

Тем не менее, это работает, только если с шириной встроено для img. Если ширины нет, я бы установил ее ширину -1 и рассмотрим ее при сортировке

Есть ли способ найти самое большое изображение на веб-странице без этих хаков, используя Puppeteer ? Поскольку браузер отображает их все, он может легко определить, какой из них самый большой

Answer 1

Вы можете использовать page.evaluate() для выполнения JavaScript в контексте DOM страницы и вернуть атрибут src самого большого изображения обратно в Node / Puppeteer:

const largest_image = await page.evaluate(() => {
  return [...document.getElementsByTagName('img')].sort((a, b) => b.naturalWidth * b.naturalHeight - a.naturalWidth * a.naturalHeight)[0].src;
});

console.log(largest_image);

Answer 2

Вы должны использовать свойства naturalWidth и naturlaHeight.

const image = await page.evaluate(() => {

  function size(img) {
    if (!img) {
      return 0;
    }
    return img.naturalWith * img.naturalHeight;
  }

  function info(img) {
    if (!img) {
      return null;
    }
    return {
      src:  img.src,
      size: size(img)
    }
  }

  function largest() {
    let best = null;
    let images = document.getElementsByTagName("img");
    for (let img of images) {
      if (size(img) > size(best)) {
        best = img
      }
    }
    return best;
  }

  return info(largest());
});