- Вопрос или проблема
- Sindreshorus’s pageres
- Поддержка нескольких разрешений
- Поддержка CLI
- Бесплатный и с открытым исходным кодом
- Поддержка сложных веб-страниц:
- gnome-web-photo
- shutter
- webkit-image
- webpage thumbnailer
- Ответ или решение
- Теория
- Примеры
- 1. Sindresorhus’s Pageres
- 2. Gnome-Web-Photo
- 3. Использование Headless-браузеров (Chrome и Firefox)
- Применение
- Заключение
Вопрос или проблема
Я хочу создавать скриншоты множества веб-страниц, и делать это вручную займет слишком много времени.
Есть ли инструмент, которому я могу передать список URL (публичных веб-сайтов), и он будет делать скриншоты.
- Необходимо рендерить нетривиальный HTML/CSS/JavaScript, например эту страницу.
- Используется из командной строки, желательно без всплывающих GUI элементов.
- Бесплатный, желательно с открытым исходным кодом, желательно без необходимости регистрации для сторонних API.
- Любая ОС, лучше всего Linux.
Sindreshorus’s pageres
Поддержка нескольких разрешений
Поддержка CLI
$ pageres <url> <разрешение> ...
$ pageres todomvc.com 1024x768 1366x768 # 2 скриншота
$ pageres todomvc.com yeoman.io 1024x768 # 2 скриншота
$ pageres todomvc.com yeoman.io 1024x768 1366x768 # 4 скриншота
Бесплатный и с открытым исходным кодом
Поддержка сложных веб-страниц:
$ pageres "https://tools.wmflabs.org/wikivoyage/w/poimap2.php?lat=42.333333&lon=12.283333&zoom=13&layer=O&lang=en&name=Fabrica_di_Roma" 1680x1080
√ Сгенерирован 1 скриншот с 1 url и 1 разрешением
Рендеринг осуществляется PhantomJS.
Я знаю о множестве инструментов, которые заявляют, что могут это сделать. Из любопытства я попробовал все из них. Я перечислил самые, по моему мнению, рабочие инструменты первым, но ваш опыт может отличаться:
gnome-web-photo
gnome-web-photo, доступный как минимум в Debian и Ubuntu, работает отлично и, кажется, исключительно с интерфейсом командной строки, несмотря на наличие “gnome” в названии.
Необходимо явно указать --mode=photo, поскольку это, кажется, не является параметром по умолчанию.
Работает отлично для моей домашней страницы, но не рендерит данную примерную страницу в пригодном виде (1024×8 пикселей).
shutter
Написанный на Perl Shutter — это GUI-программа, которая по умолчанию ждет запросов на скриншоты в системном трее. Но вы также можете использовать его из командной строки.
Когда используется из командной строки, оно все равно открывает кучу окон, включая мгновенно мерцающее окно результата, даже если вы передаете -e в командной строке, что означает завершение после снятия скриншота.
Кажется, используется gnome-web-photo как бэкэнд, по крайней мере в Debian-пакете shutter gnome-web-photo является опциональной зависимостью. Результат также выглядит так же, как и с gnome-web-photo.
К сожалению, Shutter потребляет довольно много памяти, когда используется как приложение в системном трее и имеет несколько секунд времени запуска как в режиме командной строки, так и в режиме системного трея.
webkit-image
Debian (а, вероятно, также производные, такие как Ubuntu и Linux Mint) содержат два пакета webkit-image-gtk и webkit-image-qt, которые делают скриншот веб-страницы, предоставляя URL в качестве параметра.
Его проект на стороне кажется частью редактора OpenStreetMap Josm, но в пакете Debian есть больше информации о инструменте, чем на той веб-странице.
Я только что попробовал их в Debian Unstable, но результат был довольно разочаровывающим: webkit-image-qt сгенерировал очень высокий и очень узкий, нечитабельный образ (195×11649 пикселей) с моей домашней страницы и не дал никакого изображения на данной примерной странице. А webkit-image-gtk привел к полностью непригодному изображению размером всего 1×8 пикселей для обеих веб-страниц. 🙁
Не полностью соответствуют вашим требованиям
webpage thumbnailer
Десктопное приложение для Windows, которое помогает конвертировать MHTML и HTML в изображения в пакетном режиме, захватывать скриншоты веб-сайтов полной длины, генерировать уменьшенные превью изображений веб-страниц. Поддерживает форматы изображений JPG, GIF, PNG, BMP и TIF.
Ключевые особенности
Конвертация файлов MHTML и HTML в изображения в пакетном режиме.
Захват скриншотов веб-сайтов.
Генерация эскизов веб-страниц.
Возможность создания расписания для автоматического создания скриншотов веб-сайтов.
Работает в фоновом режиме, веб-страница (-страницы) не обязательно должны быть отображены или активны для захвата.
Работает в многопоточном пакетном режиме, что позволяет захватывать несколько веб-страниц одновременно.
Поддерживает форматы изображений JPG, GIF, PNG, BMP и TIF.
Поддержка качества JPEG (степень сжатия).
Поддержка захвата сайтов с flash-контентом.
Поддержка снимков с задержкой веб-сайтов.
Опции для отключения Java, ActiveX, скриптов на веб-странице.
15 дней бесплатного пробного использования, затем $24.95.
Chrome и Firefox теперь могут делать это нативно
На Chrome 132:
chromium-browser \
--headless \
--hide-scrollbars \
--screenshot=tmp.png \
--window-size=1024,1024 \
https://softwarerecs.stackexchange.com/questions/16422
Результат:
TODO: как указать только ширину страницы, а не высоту, чтобы получить полную высоту страницы автоматически. Установка большой высоты не дает хороших результатов, так как большинство современных веб-сайтов просто растягиваются, оставляя много пустого и фиксированный внизу страницы футер. Chrome уже реализует эту функцию в интерфейсе через: “Захватить скриншот полного размера страницы”, но она просто не раскрыта.
На Firefox 134 наиболее правдоподобная команда будет такой:
firefox \
-P test-ss \
-no-remote \
--screenshot "$(pwd)/tmp.png" \
--window-size 1024 \
https://softwarerecs.stackexchange.com/questions/16422
но пока он просто зависает и не выдает никакого результата… связанный вопрос: https://support.mozilla.org/en-US/questions/1446999 Если бы это работало, это было бы многообещающе, так как согласно --help высота в --window-size необязательна, поэтому предполагается, что она автоматически рассчитывает лучшую высоту для нас, как и требуется:
--window-size width[,height] Ширина и, возможно, высота скриншота.
Забавно, как основные CLI браузеров могут быть такими сломанными/неполными.
Связанные:
- https://askubuntu.com/questions/421980/how-to-take-screenshot-of-complete-webpages
- https://askubuntu.com/questions/925551/cant-capture-screenshots-of-webpages-using-firefoxs-cli-after-upgrade-to-firef
- https://stackoverflow.com/questions/125951/command-line-program-to-create-website-screenshots-on-linux
- https://stackoverflow.com/questions/13158083/take-a-full-page-screenshot-with-firefox-on-the-command-line
- https://stackoverflow.com/questions/48152443/cant-take-screenshot-in-command-line-with-chrome
- https://stackoverflow.com/questions/67656570/how-to-take-a-screenshot-of-lengthy-website-on-google-chrome
- https://www.reddit.com/r/commandline/comments/17jtp1s/take_screenshots_of_websites_from_terminal/
Тестировалось на Ubuntu 24.10.
Ответ или решение
Для решения задачи автоматизированного создания скриншотов веб-страниц без использования графического интерфейса можно воспользоваться несколькими инструментами. Важно, чтобы выбранное решение соответствовало следующим критериям: поддержка сложного HTML/CSS/JavaScript, возможность использования из командной строки без графических элементов, бесплатность и желательно открытый исходный код. Предпочтительно использование на платформе Linux, хотя работа на любом ОС также приемлема.
Теория
Создание скриншотов веб-страниц часто требует рендеринга сложных элементов, таких как динамический контент, обеспечиваемый JavaScript, а также правильного отображения CSS-стилей. Это превращает задачу в нетривиальную, требующую использования инструментов, которые могут полностью воспроизвести поведение браузера. Многие инструменты решают эту задачу с использованием технологий, таких как браузерные движки, доступные через CLI (командную строку).
Примеры
1. Sindresorhus’s Pageres
Pageres — популярный инструмент, обеспечивающий возможность снятия скриншотов с веб-страниц через командную строку. Он поддерживает рендеринг сложных веб-страниц, таких как страницы с интенсивным использованием JavaScript. Инструмент бесплатен, с открытым исходным кодом, и работает на базе PhantomJS для рендеринга страниц.
Пример использования:
pageres "https://example.com" 1024x7682. Gnome-Web-Photo
Gnome-Web-Photo — это инструмент без графического интерфейса, который может выполнять захват скриншотов через командную строку. Он доступен в некоторых дистрибутивах Linux, таких как Debian и Ubuntu. Несмотря на название, он работает без графического интерфейса.
Пример использования:
gnome-web-photo --mode=photo "https://example.com" output.png3. Использование Headless-браузеров (Chrome и Firefox)
Современные браузеры, такие как Chrome и Firefox, поддерживают создание скриншотов в headless-режиме. Это позволяет использовать браузеры без открытия графического интерфейса:
Для Chrome:
chromium-browser --headless --screenshot=output.png --window-size=1280,1024 https://example.comДля Firefox:
firefox --screenshot "/path/to/output.png" -P "profile_name" -no-remote https://example.comПрименение
Для автоматизации процесса и обработки множества URL-адресов рекомендуется написать небольшой скрипт, который будет считывать URL-адреса из файла и использовать один из вышеуказанных инструментов для создания скриншотов:
Пример на bash:
#!/bin/bash
while IFS= read -r url; do
pageres "$url" 1024x768
done < urls.txtЭтот скрипт будет читать список URL-адресов из файла urls.txt и для каждого URL будет вызывать pageres с заданными параметрами разрешения экрана.
Заключение
Автоматизация процесса снятия скриншотов веб-страниц представляется важно́й задачей для IT-специалистов, которым необходимо обрабатывать множество веб-страниц. Использование инструментов, таких как Pageres и headless-браузеры в командной строке, позволяет достичь высокой степени автоматизации без взаимодействия с графическим интерфейсом. При этом важно учесть, что выбор конкретного инструмента должен основыватьcя на требованиях к рендерингу страниц и характеристиках используемой операционной системы.