CoderCastrov logo
CoderCastrov
Парсер

Извлечение изображений из поисковой системы с использованием Node.js и Puppeteer

Извлечение изображений из поисковой системы с использованием Node.js и Puppeteer
просмотров
3 мин чтение
#Парсер

Введение

В предыдущей статье этой серии (Практическое введение в парсинг с помощью Puppeteer: получение климатических данных вашей страны) мы узнали, как использовать Node.js и Puppeteer для парсинга и поиска контента на веб-страницах. Рекомендуется сначала прочитать эту статью, если вы никогда не использовали Puppeteer или нужно настроить проект.

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

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

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

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

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

const script = async () => {
  //это откроет окно chromium, это полезно, чтобы видеть, что происходит, и тестировать вещи перед окончательным скриптом
  const browser = await puppeteer.launch({ headless: false, slowMo: 100 })
  const page = await browser.newPage()

  //перебираем каждую породу
  for (let dogBreed of data) {
    console.log("Начало для породы:", dogBreed)
    const url = `https://duckduckgo.com/?q=${dogBreed.replaceAll(
      " ",
      "+"
    )}&va=b&t=hc&iar=images&iax=images&ia=images`

    //в случае, если мы столкнемся с страницей без изображений или ошибкой
    try {
      await page.goto(url)

      //убедимся, что страница загружена и содержит наш элемент
      await page.waitForNavigation()
      await page.waitForSelector(".tile--img__media")

      await page.evaluate(
        () => {
          const firstImage = document.querySelector(".tile--img__media")
          //открываем панель, содержащую информацию об изображении
          firstImage.click()
        },
        { delay: 400 }
      )

      //получаем ссылку на изображение из панели
      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)
      console.log("=====")
    } catch (e) {
      console.log(e)
    }
  }
}

script()

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

Скачивание и оптимизация изображений

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

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

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

const stream = fs.createWriteStream(dogBreed + ".jpg")
await https.get(link, async function(response) {
  response.pipe(stream)
  stream.on("finish", () => {
    stream.close()
    console.log("Загрузка завершена")
  })
})

// Изменение размера до максимальной ширины или высоты 1000 пикселей
await sharp(`./${dogBreed}.jpg`)
  .resize(1000, 1000)
  .toFile(`./${dogBreed}-small.jpg`)

Заключение

Вы можете адаптировать этот скрипт для получения практически любой информации, также вы можете не ограничиваться первым изображением для каждого запроса, а получать все изображения. Что касается меня, я использовал этот скрипт для получения начальных изображений для инструмента, над которым я работаю https://dreamclimate.city

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


_Опубликовано на _antoinemesnil.com