Введение

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

В этой статье мы будем получать изображения в полном разрешении из поисковой системы. Наша цель — получить представление о каждой породе собак.


Скрипт для получения ссылок на изображения

У вас должны быть установлены Node.js и Puppeteer с npm или же yarn.
Мы будем использовать те же методы, что и в первой части.
Мы собираемся использовать простой JSON в качестве нашего списка пород собак, которые можно найти здесь: набор данных о породах собак

Что касается поисковой системы, мы будем использовать Duckduckgo, потому что она позволяет нам легко получать изображения в полном разрешении, что может быть более сложно для изображений Google.

const puppeteer = require("puppeteer")
const data = require("./dog-breeds.json")

const script = async () => {
  //this will open visibly a chromium window, this is useful to see what is going on and test stuff before the finalized script
  const browser = await puppeteer.launch({ headless: false, slowMo: 100 })
  const page = await browser.newPage()

  //loop on every breed
  for (let dogBreed of data) {
    console.log("Start for breed:", dogBreed)
    const url = `https://duckduckgo.com/?q=${dogBreed.replaceAll(
      " ",
      "+"
    )}&va=b&t=hc&iar=images&iax=images&ia=images`

    //in case we encounter a page without images or an error
    try {
      await page.goto(url)

      //make sure the page is loaded and contain our targeted element
      await page.waitForNavigation()
      await page.waitForSelector(".tile--img__media")

      await page.evaluate(
        () => {
          const firstImage = document.querySelector(".tile--img__media")
          //we open the panel that contains the image info
          firstImage.click()
        },
        { delay: 400 }
      )

      //get the link of the image from the panel
      await page.waitForSelector(".detail__pane a")
      const link = await page.evaluate(
        () => {
          const links = document.querySelectorAll(".detail__pane a")
          const linkImage = Array.from(links).find((item) =>
            item.innerText.includes("fichier")
          )
          return linkImage?.getAttribute("href")
        },
        { delay: 250 }
      )
      console.log("link succesfully retrieved:", link)
      console.log("=====")
    } catch (e) {
      console.log(e)
    }
  }
}

script()
Войти в полноэкранный режим

Выйти из полноэкранного режима

После запуска скрипта с node scrapeImages.js вы должны получить что-то вроде этого:

Кукольник соскребает гифки


Загрузите и оптимизируйте изображения

Теперь у нас есть ссылки на все изображения, но некоторые из них довольно тяжелые (> 1 МБ).
К счастью, мы можем использовать другую библиотеку Node.js, чтобы сжать их размер с минимальной потерей качества: острый

Это широко используемая библиотека (более 2 миллионов загрузок в неделю) для преобразования, изменения размера и оптимизации изображений.

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

const stream = fs.createWriteStream(dogBreed + ".jpg")
await https.get(link, async function(response) {
  response.pipe(stream)
  stream.on("finish", () => {
    stream.close()
    console.log("Download Completed")
  })
})

//resize to a maximum width or height of 1000px
await sharp(`./${dogBreed}.jpg`)
  .resize(1000, 1000)
  .toFile(`./${dogBreed}-small.jpg`)
Войти в полноэкранный режим

Выйти из полноэкранного режима


Вывод

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

Скриншот персонального проекта Dream Climate City



😄 Спасибо за прочтение! Если эта статья оказалась вам полезной, значит, она является частью серии, а следующая статья будет посвящена парсингу изображений в поисковой системе. Чтобы получать уведомления, подписывайтесь на меня Твиттеря также делюсь советами по разработке, дизайну и рассказываю о своем пути к созданию собственной стартап-студии.