Создать изображение DIV в JavaScript (GIF / PNG)

Question

Мне интересно, есть ли библиотека JavaScript, которая позволила бы мне генерировать изображение из содержимого DIV.

В основном это требуется для некоторого кода печати на стороне сервера, для которого требуется распечатать фон из браузера.

В конечном итоге я хотел бы закодировать содержимое DIV в формат PNG и опубликовать закодированные данные с помощью операции печати. ​​

Есть идеи, если это возможно?

[EDIT] У меня есть картографическое приложение, в котором фоновые данные поступают с сервера изображений прямо в браузер DIV (например, Google Maps). Этот div - справочная информация для меня. Когда нажата Печать, сервер генерирует PDF из данных, о которых он знает, но ничего не знает о фоновых данных браузера. Что мне действительно нравится, так это возможность каким-то образом предоставить серверу фоновое изображение браузера!

Cheers, Ro

Answer 1

Возможно, это возможно с Canvas:

MDN - Рисование графики с помощью Canvas

Answer 2

Очень интересный вопрос.

На самом деле я решаю эту проблему с помощью ajax (перенести позиции изображений на сервер, сервер создает одно изображение из кусочков, сохраняет его и отправляет URL-адрес клиенту). Мне не очень нравится это решение, но я пока не знаю другого.

Answer 3

Вы можете создать тег изображения из JavaScript, но не фактическое изображение в нем: JS не имеет команд для выделения памяти для растрового изображения, и у него нет команд для визуализации чего-либо на нем.

Обычным решением является создание на сервере генератора отчетов, который создает изображение по запросу. Посмотрите на BIRT или JasperReports .

[ПРАВКА] Исходя из вашего комментария, решение простое: изучите DIV, найдите URL для фонового изображения и замените DIV элементом IMG. Поместите URL-адрес в атрибут SRC и затем напечатайте.

Answer 4

Должно ли это быть сделано на стороне браузера? Я видел, где вы можете сделать вызов на стороне сервера, а MIME-тип ответа сервера - это тип изображения. Я думаю, что пример, который я имею в виду, был для jpegs, закодированных в b64 в db, но процесс должен быть таким же. Ответом будут данные, которые в данный момент находятся в вашем DIV. Извините, если я далеко от базы.

Answer 5

Я думаю, что я нашел способ сделать это.

1) Когда пользователь нажимает Печать, опросить DIV
2) Изображения на этом DIV генерируются API OpenLayers
3) Захватите URL каждого изображения
4) Захватите местоположение на экране каждого изображения
5) Перевести местоположение экрана в местоположение в реальном мире (для этого у меня есть API)
6) В рамках печати отправьте все URL-адреса изображений вместе с их реальными размерами
7) Разрешить серверу повторно запрашивать изображения и рисовать их в соответствующих местах.

Answer 6

Создание изображений было возможно только в IE5 :( Затем по соображениям безопасности оно было удалено. Я все еще скучаю по нему.

Answer 7

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

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