Twost Sep 13 2011 at 14:19

Создание полноразмерных скриншотов web-ресурсов

3 min

13K

Довольно полезным сервисом является создание полноразмерных скриншотов web-ресурсов.
Реализуем этот сервис буквально за 5 минут.

Задачи:

1) Создание полноразмерных скриншотов сайтов (полный скриншот по длине и ширине, а не захват окна браузера)
2) веб-интерфейс

Технологии:

— ОС — Ubuntu 10.04
— xvfb — Виртуальный фреймбуффер (Fake Xserver)
— CutyCapt — кроссплатформенная утилита для рендеринга web-страниц
— php — для веб-интерфейса

Реализация:

— Установка ПО

1. Установка xvfb

aptitude install xvfb

2. Установка CutyCapt

2.1 Сперва устанавливаем Subversion.

aptitude install subversion libqt4-webkit libqt4-dev g++

2.2 После установки SVN создаем директорию для CutyCapt и скачиваем исходники:

mkdir /usr/ccapt
cd /usr/ccapt
svn co cutycapt.svn.sourceforge.net/svnroot/cutycapt

Далее приступим к сборке:

cd cutycapt/CutyCapt
qmake
make

Проверяем работу в консоли

xvfb-run --server-args="-screen 0, 1024x768x24" /usr/ccapt/cutycapt/CutyCapt/CutyCapt --url=http://habrahabr.ru --out=/var/www/images/habrahabr_ru.jpg

— Веб-интерфейс

3.1 Напишем простой php-скрипт для создания скриншотов

<?
// Директория для изображений
$path = '/var/www/images/';

// URL директории с изображениями на нашем сайте
$web = 'http://kih.kz/images/';


function screenshot($source,$filename)
{
	system('xvfb-run --server-args="-screen 0, 1024x768x24" /usr/ccapt/cutycapt/CutyCapt/CutyCapt --url=http://'.$source.' --out=/var/www/images/'.$filename);
	
}


if(!isset($_POST['url']))
{
	print '<html>'.
	'<head>'.
	'<title>Полноразмерный скриншот сайта</title>'.
	'</head>'.
	'<body>';

	print '<form action="" method="post">'.
	'URL:<br />'.
	'<input name="url" type="text" value="http://">'.
	'<input type="submit" value="Send">'.
	'</form>';

	print '</body>'.
	'</html>';
}
else
{
	// Будем делать скриншот главной страницы сайта. Берем из url только host
	$site = parse_url($_POST['url']); 
	
	// Заменяем точку в доменном имени на знак нижнего подчеркивания
	$filename = str_ireplace('.','_',$site["host"]).'.jpg';

	// Проверяем существование файла скриншота
	if(file_exists($path.$filename))
	{   
		// Если скриншоту меньше суток - новый не делаем
		if (system('find '.$path.' -type f -name '.$filename.' -mtime -1')) 
		{
			print 'Извините, скриншот данного сайта уже существует и сделан в посление сутки!<br />';
			print '<a href="'.$web.$filename.'">'.$web.$filename.'</a>';
		}
		else
		{
			screenshot($site["host"],$filename);
			print '<a href="'.$web.$filename.'">'.$web.$filename.'</a>';

		}
	}
	else
	{
		screenshot($site["host"],$filename);
		print '<a href="'.$web.$filename.'">'.$web.$filename.'</a>';
	}
}

?>

Вывод:

Вот таким, довольно легким способом мы получили удобный скриншотер сайтов, который отлично делает скриншоты сайтов с Flash, и создает скриншот в полный размер, а не обрезает его по размеру окна браузера.

Пример:

~~Все действия проделанные в данной заметке реализованы тут.~~
Временно недоступен.

Спасибо за внимание.

UPD:
Само по себе создание скриншота довольно ресурсоемкое и требуются значительные временные затраты на создание скриншота. (естественно, зависит и от канала запрашиваемого сайта).
Данный пример расположен на слабеньком VDS, и может не выдержать нагрузки.
Посему, прошу не сетовать, если пример будет недоступен.

UPD2:
Мой слабенький VDS, к сожалению, не осиливает такой нагрузки, поэтому, вернее всего пример будет недоступен.

Tags:

Hubs:

Website development