Можно ли сделать снимок экрана рендеринга DOM на стороне сервера?

Question

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

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

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

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

Answer 1

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

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

• dynamically scale images in php jpg/png/gif
• Resize image using PHP if it's too small

Возможно, вы захотите проверить мой ответ на этот вопрос HTML2PDF in PHP - convert utilities & scripts - examples & demos, может быть, он вам тоже поможет.

Answer 2

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

Answer 3

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

Однако, это всего лишь дубликат Website screenshots using PHP

Answer 4

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

Этот ответ должен, вероятно, поможет вам: Using HTML5/Canvas/JavaScript to take screenshots

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

Answer 5

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

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

Приветствия

Answer 6

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