Автор оригинала: Dirk Hoekstra.
В этой статье я собираюсь показать вам, как вы можете захватить скриншот веб-сайта с помощью узла и Screenshotapi.net.net.
Сначала я должен настроить новый проект узла, чтобы сделать это, я запускаю следующие команды:
npm init npm install screenshotapi.net
Как видите, я собираюсь полагаться на пакет Screenshotapi.net.
Далее я создаю index.js файл:
const screenshotApiClient = require('screenshotapi.net')('YOUR_API_TOKEN');
screenshotApiClient.saveScreenshotToImage(`screenshot.png`, {
url: 'https://codementor.io',
width: 1920,
height: 1080,
})
.catch((error) => {
console.error("Error while getting screenshot.");
console.dir(error);
})
Это должно сохранить скриншот кодамента к файлу скриншота. Чтобы запустить программу, я запускаю следующую команду:
node index.js
Когда я открываю screenshot.png Файл я действительно вижу скриншот кодамента!
Захват определенного элемента
Предположим, я хочу захватить скриншот изображения заголовка. К счастью, это тоже возможно!
Первое, что мне нужно сделать, это получить селектор CSS этого изображения, вы можете легко найти это в Chrome:
#__next > div.jsx-101835301.landing-page > div > div.jsx-2963953577.features > div.jsx-2963953577.features__hero-wrap > div
Затем я должен добавить этот селектор на клиент Screenshotapi:
screenshotApiClient.saveScreenshotToImage(`screenshot.png`, {
url: 'https://codementor.io',
width: 1920,
height: 1080,
selector: "#__next > div.jsx-101835301.landing-page > div > div.jsx-2963953577.features > div.jsx-2963953577.features__hero-wrap > div"
})
.catch((error) => {
console.error("Error while getting screenshot.");
console.dir(error);
})
И когда я запускаю эту программу, она показывает только изображение заголовка!
Заключение
Это оно! Я показал вам, как вы можете играть с помощью скриншотов, используя Screenshotapi.net и узел.
Счастливое кодирование!