radogast June 1, 2010 at 02:41 PM

Скриншоты сайтов своими руками

Website development

Проблема создания скриншотов web-страниц прямо на сервере встает достаточно редко, но, как говорится, метко. Хватишься иной раз, так гугль дает ссылки на какой-нибудь парсер уже существующего сервиса. Но, господа, это же не наш метод!

Покопавшись, можно найти что-нибудь типа связки xvfb (виртуальный фреймбуффер) с каким-нибудь браузером, например xvfb+opera, или khtml2png, который тянет за собой фигову тучу kde'шных либ. А ведь так хочется какого-нибудь легкого standalone скриптика...

Решив посвятить немного времени изучению вопроса, обстоятельно исследовал имеющийся инструментарий.

Итак, первое что мне попалось на глаза: webkit2png. Для работы скрипта необходим собственно Safari, который в свою очередь стоит на… Mac OS. Ну, может кому и пригодится...

Но, мир полон энтузиастов, и я нашел порт этого скрипта на нормальные никсы с использованием Qt и Python — webkit2png.py. Для работы нам потребуются всего 2 библиотеки: libqt4-webkit и python-qt4.
Скрипт имеет следующие аргументы:

-x, --xvfb
Стартует xvfb. По умолчанию, не используется.

-g, --geometry
Задает размеры окна виртуального браузера. По умолчанию, выставлен параметр 0, что означает autodetect.

-o, --output
Записывает полученный скриншот в указанный файл.

-f, --format
Формат изображения. По умолчанию, png.

--scale
Ресайз изображения.

--aspect-ratio
Задает пропорции. Из возможных значений: «ignore» (по умолчанию), «keep», «expand».

-t, --timeout
Выставляет таймаут запроса. По умолчанию, не используется.

--debug
Позволяет проследить процесс создания изображения. По умолчанию, не используется.

Пример вызова:
python webkit2png.py http://habrahabr.ru -o habra.png -g 1024 768

В процессе поиска скриптов, нашлись еще два (mozgrab и html2jpg), написанные на perl и использующие mozilla. Они оказались довольно старыми и, на мой взгляд, неудобными. Дальнейшие поиски решено было бросить, так как уже найдено оптимальное решение.

Tags:

Hubs:

Website development

Comments 34

bigazzzz June 1, 2010 at 02:49 PM
–8
для хрома — _https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnjcddpki
нашел так _https://chrome.google.com/extensions/search?itemlang=&q=screenshot
для фаяфокса тоже куча — _https://addons.mozilla.org/ru/firefox/search/?q=screenshot&cat=all&appid=1&lver=any&atype=0&sort=&pid=1&pp=20&lup=&advanced=

p.s. имхо, велосипед
- radogast June 1, 2010 at 02:54 PM
  +4
  То, что вы перечислили — это плагины к известным браузерам, которыми можно пользоваться на домашнем компьютере. Мой же путь позволяет создавать скриншоты на лету прямо на вэб-сервере.
  - bigazzzz June 1, 2010 at 02:58 PM
    
    +4
    извините я неправильно вас понял. плюсую
- link0ln April 6, 2011 at 07:59 AM
  0
  Спасибо за ссылки! Помогло когда нужно было срочно, жаль плюсануть не могу…
Strange June 1, 2010 at 03:07 PM
+7
Как вариант — CutyCapt.
- hior June 1, 2010 at 03:23 PM
  +4
  Кстати, его можно без X Server использовать
geleont June 1, 2010 at 03:07 PM
0
Спасибо за наводку, скоро должно понадобится, а тут на тебе все на блюдечке. Так что спасибо огромное! Плюсанул бы если бы мог=(.
- geleont June 1, 2010 at 04:45 PM
  +7
  Я новичек на хабре, скажите за что минусуете то?
  - TheMengzor June 1, 2010 at 05:44 PM
    
    +3
    >Плюсанул бы если бы мог=(.
    - geleont June 2, 2010 at 09:53 AM
      
      +1
      
      Понял. Спасибо =)
miolini June 1, 2010 at 03:20 PM
+3
luckydns.com/habra.png вот что получилось
hior June 1, 2010 at 03:22 PM
–1
Под винду IECapt можно
Lufa June 1, 2010 at 03:23 PM
0
Под Ubuntu очень доволен програмкой Shutter.
- Imposeren June 1, 2010 at 05:45 PM
  0
  $ emerge shutter
  Total: 35 packages (35 new), Size of downloads: 6,882 kB
  
  Ужас! Но Думаю если гном стоит, то не проблема(= В основном тянуться какие-то перловские модули для гнома
  - UFO just landed and posted this here
SiriusLamp June 1, 2010 at 03:36 PM
0
Как-то не приходилось сталкиваться с необходимостью «создания скриншотов web-страниц прямо на сервере».
просветите плиз, в каких случаях может понадобится?
- radogast June 1, 2010 at 03:42 PM
  +1
  Например, очень удобно было бы использовать эту возможность вэб-студиям для создания портфолио.
  А вот сайт webo.in. Там есть возможность протестировать сайт на предмет качества оптимизации. Так вот под названием исследуемого сайта есть превью. Да куча всяких надобностей может возникнуть…
- hior June 1, 2010 at 03:48 PM
  +1
  Да кучу задач можно придумать. Генерация картинок на основе html шаблонов. Например, фотографии с наложенными рамками, текстами. Надписи с использованием server-side шрифтов и т.п.
  - Imposeren June 1, 2010 at 05:46 PM
    
    0
    Занимательная идея;) Надо и для десктопных приложений интерфейс html шаблонами описывать(=
- geleont June 1, 2010 at 03:51 PM
  0
  Ну или можно сделать фишку что при наведении мышки на ссылку на внешний ресурс. Отображалась маленькая превьюшка. Видел на многих забугорных сайтах иногда бывает очень удобно.
- mekegi June 2, 2010 at 11:13 AM
  0
  у нас на фирме такое используется чтобы раз в пять минут делать скриншот яндeкс.пробок. собрать так за неделю кучу фоток и скормить их нейронной сети в надежде что она сможет «обучиться и предсказывать» пробки в будущем.
  
  П.С. правда я это сделал не так как тут описывают — а немного через другое «место». на машине стоит дебиан. скрипт на баше — запускает оперу ждет пару секунд — потом с помощью import делает скриншот части экрана — ждет еще пару секунд и закрывает оперу. (закрывать/открывать браузер пришлось потому что яндeкс.пробки не обновляли картинку если не подвигать мышью и картинка получалась статичной)
gnomeby June 1, 2010 at 04:16 PM
–4
Решение для Windows Server через ActiveX IE — habrahabr.ru/blogs/php/62965/.
Kolyaj June 1, 2010 at 05:00 PM
0
Мы для своих целей переписали вот этот плагин для Fx. При желании можно его оформить как отдельное xul-приложение.
vick June 1, 2010 at 05:45 PM
0
Здесь расписано как получить скриншот сайта, включая флеш содержимое.
На основе FF и пары плагинов. Можно автоматизировать процесс:
www.betalon.com/blog/server/create-your-own-website-screenshot-server.htm
Правда не знаю, как на сервере его заюзать, а так — очень дельная вещь.
Imposeren June 1, 2010 at 05:49 PM
0
python webkit2png.py habrahabr.ru -o habra.png -g 1024 768 < 16:47:40

(process:25557): GLib-GObject-CRITICAL **: gtype.c:2458: initialization assertion failed, use IA__g_type_init() prior to this function

(process:25557): GLib-CRITICAL **: g_once_init_leave: assertion `initialization_value != 0' failed

(process:25557): GLib-GObject-CRITICAL **: g_object_new: assertion `G_TYPE_IS_OBJECT (object_type)' failed
[1] 25557 segmentation fault python webkit2png.py habrahabr.ru -o habra.png -g 1024 768

Вам куда-нибудь кроме хабра репортить можно?

$ eix -cI pyqt
[I] dev-python/PyQt4 (4.7@01.06.2010): A set of Python bindings for the Qt toolkit

$ eix -cI qt-webkit
[U] x11-libs/qt-webkit (4.6.2(4)@09.03.2010 -> 4.6.2-r1(4)): The Webkit module for the Qt toolkit
- Imposeren June 1, 2010 at 05:50 PM
  0
  О, а на второй раз получилось, а на третий — опять ошибка;) Магия? Короче как-то через раз, а то и реже, работает
UFO just landed and posted this here
235 June 1, 2010 at 06:55 PM
0
использовали этот python-webkit2png, лучше не нашли тоже.

с CutyCapt были сначала проблемы со сборкой, потом что-то с использованием (честно не припоминаю). Но в результате по памяти он ел столько же, что webkit2png с xvfb, прироста времени рендера тоже не показал (что в принципе все ожидаемо, но было интересно) и от него отказались.

Вот и главная проблема использования на сервере — это пик виртуальной памяти от 80мб для простого сайта, 160мб для средней сложности и выше.
kuzvac June 1, 2010 at 07:01 PM
+2
Сделал установщик для webkit2png.py под никсы.
Разархивируете архив, пишите sudo python setup.py install и можно пользоваться через webkit2png.py
Davert June 2, 2010 at 12:47 PM
0
Вопрос, а ничего под Мозиллу нет? Просто как-то странно, что никто не заставил её из консоли рендерить в файл, как это сделано в webkit2png
vitjok June 2, 2010 at 01:22 PM
–2
я в своём проекте использую browsrcamp.com, через пхп+curl очень удобно дёргать сделанные ими скриншоты. единственный минус что последние месяца 2 сервис не подаёт признаков жизни :/
paules June 5, 2010 at 12:19 PM
0
а кто нибудь знает как бороться с тем что webkit2png.py потребляет много процессорного времени у меня пики доходят до 100% — и по времени скрипт отрабатывает в среднем 25с а бывает скрипт просто зависает, при этом питон процесс висит в памяти и потребляет 30% процессора.
система: gentoo Intel® Pentium® 4 CPU 3.00GHz
evguenyk June 22, 2010 at 06:16 PM
0
-bash-3.2$ python webkit2png.py habrahabr.ru -o habra.png -g 1024 768
webkit2png.py: cannot connect to X server
-bash-3.2$ python webkit2png.py habrahabr.ru -o habra.png -g 1024 768 -x
Traceback (most recent call last):
File «webkit2png.py», line 159, in?
os.execvp(newArgs[0], newArgs)
File "/usr/lib/python2.4/os.py", line 341, in execvp
_execvpe(file, args)
File "/usr/lib/python2.4/os.py", line 379, in _execvpe
func(fullname, *argrest)
OSError: [Errno 2] No such file or directory

помогите плиз разобраться, почему выводит такое и как это пофиксить?

P.S. я слаб в системном администрирование и работе с никсами… 2 дня потратил на установку python, pyqt4 и прочих вещей, которые требовались дополнительно для работы пакета… и вот последний финиш такой… вообще никаких вариантов теперь нету, буду рад помощи…
- Nevkontakte June 27, 2010 at 04:21 PM
  0
  Одно из двух: либо у вас установлена старая версия питона (2.4), либо скрипт наоборот требует именно эту версию.