Создать изображение из элементов DOM - PullRequest
Новая
       23

Создать изображение из элементов DOM

7 голосов
/ 28 мая 2011

Можно ли сгенерировать изображение из элементов dom (span, div, image и т. Д.)?В этом случае я не могу использовать canvas, и он не должен быть кросс-браузерным, если он работает в некоторых браузерах.: -)

Спасибо!

редактирование сообщества:"Итак, я понимаю, что клиент уже может отображать эти элементы просто отлично, но вы хотите, чтобы сервер могнапример, отобразить изображение предварительного просмотра вокруг сайта? "«Да, именно. Просто небольшой предварительный просмотр, чтобы они могли видеть, какую диаграмму они открывают, и предварительный просмотр также будет использоваться в других небольших местах».

Ответы [ 3 ]

3 голосов
/ 28 мая 2011

Если вы хотите скопировать его в другое место, вы можете использовать -moz-element, экспериментальную нестандартную функцию в Firefox, которая позволит вам взять любой фрагмент DOM и использовать его в качестве, например, фонового изображения. https://developer.mozilla.org/en/CSS/-moz-element

Подобные взломы могут быть сделаны в webkit путем злоупотребления -webkit-box-reflect.

2 голосов
/ 28 мая 2011

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

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

на стороне клиента:

  • Вы просите что-то очень ... интересное.=) Это возможно , потому что есть веб-решения для отслеживания ошибок, которые позволяют сделать снимок экрана.Например, этот случайный, который я нашел путем поиска в Google website bug report screenshot, похоже, использует расширение браузера для выполнения магии.

  • Вы можететакже, возможно, сможете выполнять эту магию с помощью Flash.

  • В качестве альтернативы, если это не повлечет за собой больших накладных расходов, вы можете просто сгенерировать «изображения» наиспользовать <div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div>, но если бы в одном изображении было очень-очень-очень большое количество элементов, это значительно замедлило бы рендеринг любого типа «страницы предварительного просмотра», которую вы реализовали, если только вы не вставили html в страницувремя от времени несколько секунд;хотя страница все еще может немного запаздывать.

на стороне сервера:

  • Однако самый переносимый способ сделать это - использовать серверсо стороны веб-рендеринга (желательно в песочнице), который предназначен для программного доступа, т.е. позволит вам сделать скриншот страницы.
0 голосов
/ 28 мая 2011

Как насчет использования отдельной программы захвата экрана, такой как MWSnap?

...