Как создать скриншот сайта с помощью SnappyBundle (wkhtmltoimage) в Symfony 3

Содержание

1 Требования
2 1) Установка и настройка SnappyBundle
3 2) Примеры

Слава богу, создание скриншотов не является задачей, которую разработчик должен часто выполнять, однако знание того, как их создавать, может быть полезным для ваших знаний в области разработки. В этом случае для создания скриншота веб-сайта в Symfony 3 мы будем использовать wkhtmltoimage и KnpSnappyBundle (оболочка, написанная на PHP для консольных команд wkhtmltoimage).

wkhtmltopdf и wkhtmltoimage — это инструменты командной строки с открытым исходным кодом для рендеринга HTML в PDF и различные форматы изображений с использованием механизма рендеринга Qt WebKit. Они работают полностью «без головы» и не требуют отображения или службы отображения.

Требования

Тебе понадобиться wkhtmltoimage доступно в вашей системе и доступно в командной строке. wkhtmltoimage — это инструмент командной строки для рендеринга HTML в PDF и различные форматы изображений с использованием движка рендеринга Qt WebKit. Они работают полностью «без головы» и не требуют отображения или обслуживания дисплея.

Окна: Вы можете скачать установщик для каждой архитектуры (x86 и x64) в площадь установки. Хотя вы можете изменить путь к исполняемому файлу wkhtmltoimage позже в файле config.yml, желательно иметь wkhtmltoimage доступно как переменная среды в вашей системе (если вы не хотите создавать переменную среды для wkhtmltopdf, вы можете указать полный путь к исполняемому файлу позже).
Debian / Ubuntu: Вы можете установить дистрибутив из wkhtmltopdf непосредственно в консоли, используя следующую команду:

$ sudo apt-get install wkhtmltopdf

Посетить домашняя страница wkhtmltopdf и wkhtmltoimage для получения дополнительной информации здесь.

1) Установка и настройка SnappyBundle

кусачий Сам по себе является оболочкой PHP (5.3+) для утилиты преобразования wkhtmltopdf и wkhtmltoimage. Он позволяет создавать файлы PDF или изображения из HTML-документов или веб-сайтов, используя движок webkit. KnpSnappyBundle обеспечивает простую интеграцию для вашего проекта Symfony.

Чтобы установить SnappyBundle в свой проект, выполните следующую команду composer:

composer require knplabs/knp-snappy-bundle

Или добавьте вручную добавление имени пакета в файл composer.json и затем выполните composer install:

{
"require": {
"knplabs/knp-snappy-bundle": "~1.4"
}
}

Когда загрузка будет завершена, включите пакет, добавив следующую строку в ваше ядро:

$bundles = [
//..//
new Knp\Bundle\SnappyBundle\KnpSnappyBundle(),
];

Наконец, вам просто нужно добавить базовую конфигурацию в ваш config.yml файл, обеспечивающий и включающий двоичный путь wkhtmltoimage.

Обратите внимание, что, как упоминалось ранее, для работы SnappyBundle требуется wkhtmltoimage, поэтому мы должны предоставить в двоичном варианте config.yml полный путь к исполняемому файлу wkhtmltoimage перед его использованием, иначе вы столкнетесь с одной из самых известных ошибок:

Двоичный путь в Windows

При использовании установщика по умолчанию (и параметров установки по умолчанию) wkhtmltopdf в программных файлах вашего основного раздела должна быть папка wkhtmltopdf / bin с исполняемым файлом wkhtmltopdf (который включает в себя wkhtmltoimage), поэтому вам нужно только указать путь к файлу следующий пример.

Однако, если вы использовали пользовательскую установку, просто измените путь на новый, содержащий исполняемый файл wkhtmltoimage в binaryимущество.

# Windows configuration
knp_snappy:
image:
enabled:    true
binary:     "\"C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltoimage.exe\""
options:    []

Двоичный путь в Linux / Unix, как

Если вы установили wkhtmltopdf с помощью метода apt-get, пути, вероятно, следующие:

# app/config/config.yml
knp_snappy:
image:
enabled:    true
binary:     /usr/local/bin/wkhtmltoimage
options:    []

Как изменить настройки генерации скриншотов

Вы можете динамически изменять настройки по умолчанию в config.yml файл :

# config.yml
knp_snappy:
image:
enabled:    true
binary:     "wkhtmltoimage"
options:
width: 1920
height: 1080

Или динамически в вашем контроллере (или сервисе и т. Д.), Используя PHP с методом setOption snappy:

get('knp_snappy.image');
$snappyImage->setOption('height', 1080);
$snappyImage->setOption('width', 1920);
$snappyImage->setOption('quality', 100);
$snappyImage->setOption('disable-javascript', false);
//$snappyImage->setOption('crop-x', 0);
//$snappyImage->setOption('crop-y', 0);

2) Примеры

Сохранить скриншот с сайта в хранилище

По умолчанию snappy предоставляет вам возможность легко генерировать изображения, и изображение будет сохранено в пути, указанном как второй параметр метода generate:

get('knp_snappy.image');
$filepath = 'imagehd.jpg';//or filename.png
// Set dimensions of the output image
$imageGenerator->setOption('width',1920);
$imageGenerator->setOption('height',1080);
// Take a screenshot of Our Code World website !
$imageGenerator->generate('http://www.site.com', $filepath);
return new Response("Image succesfully created in ".$filepath);
}
}

Генерация загрузки файла в контроллере

Чтобы вернуть изображение в качестве вложения, используйте BinaryFileResponse с расположением в качестве вложения:

get('knp_snappy.image');
$filepath = 'imagehd.jpg';//or image.png
// Set dimensions of the output image
$imageGenerator->setOption('width',1920);
$imageGenerator->setOption('height',1080);
// Take a screenshot of Our Code World website !
$imageGenerator->generate('http://www.site.com', $filepath);
$response = new BinaryFileResponse($filepath);
$response->setContentDisposition(ResponseHeaderBag::DISPOSITION_ATTACHMENT);
return $response;
}
}

Вернуть изображение как ответ в контроллере

Чтобы вернуть изображение в качестве ответа, используйте BinaryFileResponse со встроенным расположением:

get('knp_snappy.image');
$filepath = 'imagehd.jpg';
// Set dimensions of the output image
$imageGenerator->setOption('width',1920);
$imageGenerator->setOption('height',1080);
// Take a screenshot of Our Code World website !
$imageGenerator->generate('http://www.site.com', $filepath);
$response = new BinaryFileResponse($filepath);
$response->setContentDisposition(ResponseHeaderBag::DISPOSITION_INLINE);
return $response;
}
}

Повеселись !