Как сделать скриншот сайта на серверной стороне?

Question

[IsaevDev]

Как работают онлайн-сервисы по созданию скриншотов сайтов? Можно ли здесь обойтись хостингом php или потребуется сервер. Я так понимаю, страница должна загружаться в виртуальный браузер на сервере и оттуда уже скриншотиться в картинку?

Answer 1

[ТыжСисАдмин]

https://github.com/microweber/screen

Comments

[IsaevDev]

А получится ли скроллить, чтобы захватить весь контент?

[ТыжСисАдмин]

IsaevDev: поидее он полностью страницу захватывает у него нет скрола как класса, хотя может и ошибаюсь. Читайте доки спрашивайте в issue

[IsaevDev]

Алексей POS_troi: просто понимаете какая штука. Все вот эти новомодные лендинги, где контент появляется по мере увеличения скролла. Или вообще сайты, где на каждое событие скролла вываливается новый экран. Вот как такие сайты обрабатывать вообще непонятно

[Kerm]

Попробовал эту библиотеку, не чего там хорошо она делает скриншоты, как будто бы нет поддержки css3, html5

Answer 2

[Виктор]

Пробовал разные скрипты для скриншота страницы, но так как часть элементов показывается походу скроллинга страницы, не нашел ни одного рабочего решения.
Но придумал свое:
1.На сервере запускается firefox в виртуальном графическом режиме и открывает ссылку на сайт.
2.Скрипт работает через xdotool и перемещает скрол в окне firefox вниз несколько раз, а потом на самый верх.
3.С помощью xdotool посылается команда Shift+F2(открыть консоль) и затем команда screenshot --fullpage /path/to/screen.png делает скриншот.
4.Через imagemagick сжимаем скриншот, т.к. размер иногда доходит до 30-50М
Результат: полный скриншот с видимыми элементами и выглядит именно так как в браузере.

Comments

[IsaevDev]

Вот примерно так себе и представлял. Все эти новомодные лендинги. А откуда запускается Firefox? И можно ли такое с chrome проделать?

[Виктор]

IsaevDev: Если вы делаете сервис скриншотов, то запускать на сервере конечно. Если для себя, то можете на своем компе. В Chrome такого не сделаешь, так как нету devtools который делает скиншот полный по горячим клавишам (я не знаю).

[Виктор]

IsaevDev: Вот мой скрипт получения скринов, запуск на своем компе:

#!/bin/bash

#FF=$(xdotool selectwindow)
FF=`xdotool search --name "Mozilla Firefox" |sort -n| sed -n 2,1p`
xdotool windowactivate $FF
echo $FF

#url=$1
#file1=$2
file1=/home/user/screens/0.png
file2=`echo "$file1"|sed "s/\.[^\.]\+$/.jpeg/"`
scrolling=1
converting=1

#if [ -z "$url" -o -z "$file1" ]; then
# echo "USAGE: $0 URL FILE"
# exit 1
#fi

if [ -n "$url" ]; then
echo $url|xclip -i -selection clipboard
xdotool key --window $FF --delay 50 Ctrl+l Shift+Insert Return sleep 5
fi

if [ "$scrolling"=="1" ]; then
xdotool windowactivate $FF
xdotool key --window $FF --delay 1000 Page_Down Page_Down Page_Down Page_Down Page_Down End Page_Up Page_Up Page_Up Home sleep 2
fi

cmd="screenshot $file1 --fullpage"

xdotool windowactivate $FF
xdotool key --window $FF --delay 1000 Shift+F2

echo $cmd|xclip -i -selection clipboard
xdotool windowactivate $FF
xdotool key --window $FF --delay 500 Shift+Insert Return sleep 5 key --window $FF Shift+F2

if [ -f "$file1" -a "$converting"=="1" ]; then
convert -quality 90% -resize 80% "$file1" "$file2"
rm -f "$file1"
fi
killall xclip

exit 0

[Виктор]

Виктор: работает для версии xdotool-2.20110530.

[IsaevDev]

Виктор: спасибо большое! Буду пилить в эту сторону. Ну что на сервере понятно)) Я просто не очень знаком с апи. Есть какой-то exec чтобы из php запустить на выполнение такой скрипт? Или из java. Или вы просто руками для себя запускаете?

[Виктор]

IsaevDev: На php вот так: exec('/usr/local/bin/my-screen.sh');
А сам скрипт я делал на sh.
Чтобы запустить firefox, помойму нужно смотреть в сторону
xvfb-run - run specified X client or command in a virtual X server environment
Ковыряться придется, это факт, я даже сам хотел сервис на основе этой концепции сделать, жаль времени не хватило.

[IsaevDev]

Виктор: спасибо! да уж, поковыряться тут придется

[bromzh]

Вот чтобы избежать таких костылей и придумали phantomjs (который не требует никаких графических библиотек и фреймбуферов) и selenium (чтобы не писать всё на баше, а использовать программно через человеческое апи). Высота вьюпорта, прокрутка мыши, набор текста в поля ввода - всё решается программно. 2015 на дворе, к чему такие велосипеды?

[Kerm]

bromzh, она плохо делает скриншоты современных сайтов

Answer 3

[bromzh]

www.seleniumhq.org + phantomjs.org

Comments

[IsaevDev]

не очень понял, зачем тогда нужен selenium)

[bromzh]

IsaevDev: для удобного программного использования. АПИ селениума поддерживается кучей языков. А так да, можно напрямую через phantomjs всё делать (или через эту штуку https://code.google.com/p/selenium/wiki/JsonWirePr... )

Answer 4

[Евгений Лисовский]

я на руби делаю скриншоты определенного размера (1366х768) с помощью phantomjs.
но скриншотятся, увы, не все сайты.

Answer 5

[googmap]

если с Java дружите, то можете еще в сторону HTMLUnit посмотреть