Crear una imagen de un DIV en JavaScript (GIF/PNG)

Question

Me pregunto si hay una biblioteca de JavaScript disponible que me permita generar una Imagen a partir de los contenidos de un DIV.

Básicamente esto es necesario para algunos códigos de impresión del lado del servidor, que necesitan imprimir un fondo desde el navegador.

Lo que al final me gustaría hacer es codificar los contenidos DIV en formato PNG y publicar los datos codificados con la operación de impresión.

¿Alguna idea si esto es posible?

[EDITAR] Lo que tengo es una aplicación de mapeo donde los datos de fondo provienen de un servidor de imágenes directamente en un navegador DIV (Think Google Maps). Ese div es de fondo para mí los datos principales. Cuando se pulsa Imprimir, el servidor genera un PDF a partir de los datos que conoce, pero no sabe nada sobre los datos de fondo del navegador. Lo que realmente me gustaría es poder proporcionar al servidor la imagen de fondo de los navegadores de alguna manera.

Saludos, Ro

Answer 1

I Creo que he encontrado una forma de hacerlo.

1) Cuando el usuario presiona Imprimir, interrogue al DIV
2) Las imágenes en ese DIV están siendo generadas por la OpenLayers API
3) Coge la URL de cada imagen
4) Coge la ubicación en la pantalla de cada imagen
5) Traducir la ubicación de la pantalla en un lugar del mundo real (no tengo API para esto)
6) Como parte de la impresión, envíe todas las URL de la imagen junto con sus extensiones del mundo real
7) Permita que el servidor vuelva a solicitar las imágenes y dibuje en sus ubicaciones correspondientes.

Answer 2

Se puede crear una etiqueta de imagen desde JavaScript, pero no la imagen real en ella: JS no tiene comandos para asignar memoria para el mapa de bits y no tiene comandos para prestar cualquier cosa en él.

La solución habitual es tener un generador de informes en el servidor que crea la imagen a petición. Mira BIRT o JasperReports.

[EDITAR] Según su comentario, la solución es simple: examine el DIV, busque la URL de la imagen de fondo y reemplace el DIV con un elemento IMG. Coloque la URL en el atributo SRC y luego imprima.

Answer 3

Realmente no creo que esto sea posible en el navegador, ciertamente no sin algún tipo de complemento.

¿Podría enviar alguna información de coordenadas o algo al servidor web y de esa manera solicitar al servidor web la misma imagen de mapa del servidor de imágenes? .

Answer 4

generando imágenes sólo era posible en IE5 :(A continuación, por razones de seguridad, la dejaron caer todavía estoy perdiendo que

Answer 5

Tal vez sea posible con la Canvas:.

MDN - Drawing Graphics with Canvas

Answer 6

¿Tiene que hacerse en el lado del navegador? He visto dónde puede hacer una llamada del lado del servidor y el tipo MIME en la respuesta del servidor es el tipo de imagen.Creo que el ejemplo en el que estoy pensando es para jpegs codificados con b64 en un db, pero el proceso debería ser el mismo. La respuesta sería la información que está actualmente en su DIV. Lo siento si estoy fuera de la base.

Answer 7

Pregunta muy interesante.

En realidad resuelvo este problema usando ajax (transfiero las posiciones de las imágenes al servidor, el servidor crea una imagen de las piezas, la guarda y envía la url al cliente). No me gusta mucho esta solución pero aún no sé otra.