Можно ли сделать скриншот визуализированного DOM на стороне сервера?

В моем веб-приложении пользователь может создать разметку HTML/CSS, которая сохраняется в моей базе данных. Я хотел бы предложить «миниатюру» для этой разметки, например, в обзорном представлении.

Поскольку миниатюра должна быть размером около 200x200 пикселей, а исходная разметка предназначена для просмотра в размере около 900x900 пикселей, мне нужно найти способ «масштабировать» эту разметку: это должно быть так, как если бы я сделал снимок экрана обработанной разметки с разрешением 900 пикселей. и уменьшил его до 200px.

Кто-нибудь знает, возможно ли это с помощью JavaScript или PHP? Или, возможно, другой серверный язык? Я хотел бы избежать использования любых сторонних апплетов, таких как ActiveX.

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


javascript php webpage-screenshot
person Louis B.    schedule 13.04.2012    source источник

Ответы (6)


arrow_upward
5
arrow_downward

Вы можете использовать WKHTMLTOPDF. Он также имеет функцию сохранения изображений под названием WKHTMLTOIMAGE (думаю, это другой дистрибутив, но вы можете скачать его по той же ссылке). Вы можете запустить его с помощью exec() из PHP в качестве системного вызова. Используя виртуальный буфер, такой как xvfb, вы можете запустить WKHTMLTOIMAGE без головы на сервере. Он основан на WebKit, поэтому результаты действительно хорошие...

Вы можете масштабировать полученное изображение с помощью стандартных функций PHP, как описано, например, в этих сообщениях:

Возможно, вы захотите проверить мой ответ на этот вопрос HTML2PDF в PHP - конвертировать утилиты & скрипты - примеры и демонстрации, возможно, это тоже поможет вам.

person Michal    schedule 13.04.2012

arrow_upward
1
arrow_downward

Лучше всего разделить работу на две части: сделать снимок экрана и уменьшить его до 200x200. Для первой части вам понадобится инструмент командной строки или библиотека, которая может отображать HTML непосредственно в растровый файл (возможно, PNG); Я не знаю ни одного в данный момент, но если вы действительно полны решимости, я уверен, что создание небольшой оболочки вокруг webkit и libpng не должно быть слишком сложным, если вы знаете, что делаете. Для масштабирования вы можете использовать либо gd (настроен на большинстве настроек PHP), либо ImageMagick (более мощный). Когда у вас есть эти два, нужно просто написать правильный клей, чтобы соединить их вместе.

person tdammers    schedule 13.04.2012

arrow_upward
0
arrow_downward

Короче говоря, нет «простого» способа сделать это.

Однако это всего лишь дубликат снимков экрана веб-сайта с использованием PHP.

person John Green    schedule 13.04.2012

arrow_upward
0
arrow_downward

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

Этот ответ, вероятно, должен вам помочь: делать скриншоты

В противном случае вы можете попытаться «воссоздать» аналогичное представление на стороне сервера, используя, например, WKHTMLTOPDF. (как предлагает Михал).

person lum    schedule 13.04.2012

arrow_upward
0
arrow_downward

Да, это возможно, и я даже реализовал решение, используя php-интерфейс в качестве точки входа в сервис. Настоящая работа выполняется PhantomJS/Xvfb, где отображается страница, исполняемый javascript (очень важно для всего динамически генерируемого контента в Интернете).

По сути, использование PhantomJS и кадрового буфера Xvfb сделало эту задачу очень простой. Подробнее читайте здесь: http://code.google.com/p/phantomjs/ и здесь http://skookum.com/blog/dynamic-screenshots-on-the-server-with-phantomjs/

Ваше здоровье

person smassey    schedule 13.04.2012

arrow_upward
0
arrow_downward

Я использовал ABCpdf из http://www.websupergoo.com/ для этого, кажется, работает довольно хорошо, но это коммерческий продукт, хотя у него есть бесплатный пробный период. Я не связан с этой компанией.

person Mark Schultheiss    schedule 13.04.2012