Puppeteer скриншот элемента, страницы и области

от
  1. Puppeteer скриншот страницы
  2. Puppeteer скриншот элемента
  3. Puppeteer скриншот области

Puppeteer скриншот страницы

В puppeteer имеется специальный метод для получения скриншота: screenshot(). Например, если мы хотим захватить изображение сайта google.com, то сделать это можно следующим образом:

const puppeteer = require('puppeteer');           // подключаем библиотеку
(async () => {                                    // объявляем функцию
  const browser = await puppeteer.launch();       // запускаем браузер
  const page = await browser.newPage();           // создаем новую вкладку
  await page.goto('https://google.com')           // переходим по ссылке
  await page.screenshot({path: 'google.png'});    // делаем скриншот, сохраняя изображение в файл google.png
  await browser.close();                          // закрываем браузер
}
})();

В результате выполнения этого кода в директории со скриптом у нас появится изображение с названием google.png:

Если страница сайта большая и имеет прокрутки, то для того чтобы сделать полный скриншот необходимо в метод screenshot() передать параметр fullPage со значением true:

const puppeteer = require('puppeteer');           // подключаем библиотеку
(async () => {                                    // объявляем функцию
  const browser = await puppeteer.launch();       // запускаем браузер
  const page = await browser.newPage();           // создаем новую вкладку
  await page.goto('https://google.com')           // переходим по ссылке
  await page.screenshot({path: 'google.png', fullPage: true}});    // делаем скриншот всей страницы (без прокруток)
  await browser.close();                          // закрываем браузер
}
})();

Puppeteer скриншот элемента

Но что делать, если нам требуется сделать скриншот только определенного элемента? Например, лого google? Это можно сделать, воспользовавшись методом screenshot() у ElementHandle.

Для начала определим имя селектора нашего элемента. Для этого наведем указатель мыши на лого, кликнем правой кнопкой мыши и в появившемся контекстном меню выберем “Посмотреть код“:

Справа откроется панель разработчика, в которой вы увидите код страницы. Нужная часть уже будет подсвечена. Наводим на нее мышь, правой кнопкой Copy – Copy selector:

В буфере обмена будет: #hplogo. Это и есть имя требуемого нам селектора. Теперь получим скриншот необходимого нам элемента. Изменим предыдущий пример:

const puppeteer = require('puppeteer');           // подключаем библиотеку
(async () => {
  const browser = await puppeteer.launch();       // запускаем браузер
  const page = await browser.newPage();           // открываем новую вкладку
  await page.goto('https://google.com');          // переходим на сайт

  // Далее #hplogo - требуемый нам селектор
  await page.waitForSelector('#hplogo');          // дожидаемся загрузки селектора
  const element = await page.$('#hplogo');        // объявляем переменную с ElementHandle
  await element.screenshot({path: 'google.png'}); // делаем скриншот элемента
  await browser.close();                          // закрываем браузер
})();

В папке со скриптом у нас появится файл logo.png:

Puppeteer скриншот области

Еще один способ получить скриншот элемента – это передать в функцию screenshot() параметр clip с координатами элемента:

const puppeteer = require('puppeteer');              // подключаем библиотеку
(async () => {   
  const browser = await puppeteer.launch();          // запускаем браузер
  const page = await browser.newPage();              // открываем новую вкладку
  await page.goto('https://google.com');             // переходим на сайт

  // Далее #hplogo - требуемый нам селектор
  await page.waitForSelector('#hplogo');             // дожидаемся загрузки селектора
  const logo = await page.$('#hplogo');              // объявляем переменную с ElementHandle
  const box = await logo.boundingBox();              // данная функция возвращает массив геометрических параметров объекта в пикселях
  const x = box['x'];                                // координата x
  const y = box['y'];                                // координата y
  const w = box['width'];                            // ширина области
  const h = box['height'];                           // высота области
  await page.screenshot({'path': 'logo.png', 'clip': {'x': x, 'y': y, 'width': w, 'height': h}});     // выполняем скриншот требуемой области и сохраняем его в logo.png
  await browser.close();                             // закрываем браузер
})();

Аналогичным образом вы можете получить скриншот любой области, если знаете координаты и размеры этой области, передав их в опции ‘clip’:

await page.screenshot({‘path’: ‘field.png’, ‘clip’: {‘x’: 75, ‘y’: 50, ‘width’: 100, ‘height’: 50}});

Оставьте комментарий