a_ex
@a_ex
Веб-разработчик

Как из командной строки получать скриншоты веб-страниц webkit'ом?

Нужно под Debian7 или под Windows7 запускать движок webkit, чтобы получать скриншот всей страницы в составе сценария деплоймента.

Если под Debian, то желательно без иксов.

Пробовал различные сценарии на питоне и питоновский пакет менеджер pip, который мне ничем не помог, ибо пакеты почему-то все, как один не приносили зависимости и не работали.
p.s. с питоном не знаком.

Пытался установить также аптитудой некие пакеты с названиями типа webkit2png, webkit2pdf, webkit. Однако, наличие в их зависимостях X11 меня пугало.

UPD
Здесь нашёл похожий вопрос, ответом на который служит PhantomJS.
Это решение мне видится более удобным, в отличии от python-based сценариев, потому что он для Node.js.
Сейчас ищу, как конкретно с его помощью получить скриншот.

UPD
На главной странице проекта ссылка phantomjs.org/screen-capture.html :)
Сейчас буду пробовать.

Если кто-то уже делал, буду рад советам.

UPD
Результат хотя и был получен, но качество его желает оставлять лучшего.
На текущий момент phantomjs использует Mozilla/5.0 (Unknown; Linux i686) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.9.7 Safari/534.34
Что, видимо, примерно соответствует жутко устаревшему Safari 5, который не поддерживает все новинки из CSS3, так мне необходимые.

p.s. попутно нашёл утилиту позволяющую запускать приложения требующие X11 без этих самых иксов, т.е. на сервере (спасибо @0neS):
xvfb-run --server-args="-screen 0, 1366x768x24" ТУТ_ВЫЗОВ_УТИЛИТЫ_ТРЕБУЮЩЕЙ_ИКСОВ
Устанавливается под дебиан так: apt-get install python-qt4 libqt4-webkit xvfb

Сейчас думаю попробовать затащить на сервер полноценный chromium, запустить через xvfb-run и попробовать как-то вытащить оттуда скриншот.

UPD
На странице e-method.blogspot.fr/2010/11/google-chrome-with-xv... описывается как сделать то, что мне нужно (это называется headless запуск ).

Сейчас буду пробовать.

Возможно, кто-то уже делал?

UPD
Ничего не вышло.
Установил Chromium (в оригинальной статье предлагалось google-chrome, но в репозиториях его не оказалось), xvfb и imagemagick (чтобы взять скриншот)
root@localhost: ~# apt-get install xvfb imagemagick chromium-browser

Запустил
xvfb-run --server-args='-screen 0, 1024x768x24' chromium -start-maximized http://google.com > & /dev/null &
DISPLAY=:99 import -window root myimage.png

в ожидании вожделенного скриншота...
И во превых получил
-bash: syntax error near unexpected token `&'
Убрал лишний амперсанд:
xvfb-run --server-args='-screen 0, 1024x768x24' chromium -start-maximized http://google.com > /dev/null &

И...
DISPLAY=:99 import -window root myimage.png
No protocol specified
import.im6: unable to open X server `:99' @ error/import.c/ImportImageCommand/368.


Всевозможные попытки достучаться не увенчались успехом...
strace chromium
показал среди прочего
(chromium:8571): Gtk-WARNING **: cannot open display:
) = 56
exit_group(1) = ?

Так что, :99 fake дисплей, видимо так и не открылся...

UPD
С помощью этой статьи удалось научиться поднимать виртуальный дисплей и сделать скриншот.
А тут было написано, как решить проблему запуска chromium из-под root, которая у меня возникла: просто вызывать его так chromium --user-data-dir

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

Решать попробую написанием JS скрипта, который будет листать сайт и Bash скрипта, который должен синхронно делать скриншоты...

UPD
Ах да. Для тех, кому тоже потребовалось подобное вот конкретные действия и результаты:
Выполнить шаги 1 и 2 по статье этой. Вместо firefox я ставил chromium. Флэш я тоже не ставил.

Теперь поднимаем виртуальный дисплей: `sudo service xvfb start`

Затем запускаем хром DISPLAY=:5 nohup chromium --user-data-dir -start-maximized google.com &

И наконец делаем скриншот DISPLAY=:5 import -window root screenshot.png

Исходное положение
199858358c604b9388cc611430d0a1e5.png

Хромиум запущен
e75e89e8853c4afbb7a5dff7831c0f75.png

Снимок получен
b7d3e6e4b70c4c889c7e991e2ee969fa.png8533760ae36f4f009c29d6dcb751aca7.png
  • Вопрос задан
  • 5725 просмотров
Пригласить эксперта
Ответы на вопрос 5
0neS
@0neS
Из этих вариантов все перепробовали?
www.binarytides.com/take-webpage-screenshot-from-c...
maxivak.com/take-screenshots-of-websites-from-comm... (первые два)
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Берите PhantomJS и не парьтесь. Есть примеры, да и по опыту это самое некорявое и поддерживоемое решение для подобных задач. Далее идет wkhtmltopdf/wkhtmltoimage, но оно бывает глючит и... ну как бы с поддержкой у него похуже. Да и возможностей так же меньше.
Ответ написан
GM2mars
@GM2mars
Не подскажите, ваше решение, к которому вы пришли (поднятие виртуального дисплея) на сколько оно ресурсоемко и выполняется по времени?
К примеру если мне нужно получить 100 скриншотов небольшого размера (300х300). Понятно что зависит от сайтов и времени загрузки; если брать усредненные значения.
Ответ написан
a_ex
@a_ex Автор вопроса
Веб-разработчик
node-webkitgtk (GitHub: kapouer/node-webkitgtk, Лицензия: MIT, npm: webkitgtk)

от Jérémy Lal представляет собой коллекцию webkitgtk баиндингов для Node. Программный интерфейс у продукта можно вызывать по цепочке, так что вы можете делать что-то вроде этого:

WebKit().load('http://github.com').png('github.png').pdf('github.pdf')


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


Резюме: С установкой этой штуковины большие проблемы.

----------------------------------------------------------------------------------------------------------------------------

Есть ещё segmentio/nightmare, но он хотя и удобен и ставится легко, но работает поверх phantomjs и поэтому так же использует крайне старую версию движка.

Резюме: абсолютно не юзабелен для получения скриншотов (вёрстка плывёт).

----------------------------------------------------------------------------------------------------------------------------

Так что метод, изложенный в конце вопроса остаётся самым действенным. Его минусы:
- Длинная процедура установки
- Снимок только первого экрана
- Чтобы в снимок не попадал браузер, нужно хитрым образом передать параметр «киоск»-режима.
Ответ написан
Комментировать
rooltak
@rooltak
Попробуйте пакет webkit-image-gtk или webkit-image-qt
В них есть утилита webkit-image. Она делает полный скриншот страницы т.е. на всю длину и ширину.

Синтаксис можно посмотреть в man webkit-image. Хотя он впринципе примитивен:
webkit-image www.onliner.by > output.png

пример работы команды 3900630eb19948bf8b3eea9a0d4d3fd0.PNG
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы