Crear jpg a partir de div con PHP

[ravalos7]

Amigos,


Tengo un problema que no se como resolver. Tengo un div dentro del cual existen multiples imagenes superpuestas y con posicionamiento absoluto, conformando un mapa.

Mi intencion es generar un jpg a partir del contenido de ese div, de tal modo que la imagen resultante sea el mapa completo.


Por favor Ayudenme me urge para mi trabajo !!!!

Saludos desde Chile,

Ricardo Avalos

[maycolalvarez]

usa la librería GD: http://php.net/manual/es/book.image.php

[pateketrueke]

claro, usar GD es la mejor alternativa si puedes leer las imágenes físicamente...

vamos... que no sirve de mucho si solo las tienes en un <div/>, pero si tienes forma de obtener dichos archivos... pues... ;)

[ravalos7]

Amigos,

Ante todo gracias por contestar pero necesito algo más que eso.

También estuve revisando la documentación de gd de php pero no se como hacerlo. El detalle que al interior de esa capa existen diversas imagenes posicionadas dinamicamente para formar el mapa, varios tiles los que ealgo entiendan de mapa me comprenderán, que no son otra cosa que pequeños cuadrados con segmentos del mapa los que se unen y se ve el mapa completo. Eso sin contan otras capas con imagenes que van superpuestas con diversos puntos del mapa.

Es por eso que no es tan fácil hacer lo que me propongo y de hecho no se como hacerlo. En términos simples sería enviarle el contenido del div contenedor de todo aquello y que vía php se cree una imagen nueva con todo eso. Otra forma de verlo sería como una captura de pantalla del contenido de ese div contenedor.


Por favor ayudenme ya que lo necesito con extrema urgecia para mi trabajp.

Saludos desde Chile,


Ricardo Avalos

[pateketrueke]

pues claro que sabemos que es un mapa de imágenes...!!

¿pues por quienes nos tomas?

lo que debes entender tu es lo siguiente: necesitar obtener las rutas reales de dichas imágenes que conforman el mapa, ahora, ¿tu has producido el mapa o es de algún lado?

quizá ahí esté la respuesta...

en todo caso puedes enviar el objeto completo (el DOM del div) serializado como HTML, hacía algún script PHP que procese dicho contenido y extraiga las URL de las imágenes...

realmente no es nada sencillo, y pues...

todo esto dicho en tus propias palabras, ahora, ¿que tanto sabes de esto?

- necesitas manipular el DOM, con jQuery puedes ser muy fácil...
- necesitas expresiones regulares en PHP para extraer los datos
- necesitas manipular la extensión GD para integrar todo
- necesitas -sobre todo- mucho ingenio y paciencia

[GatorV]

Lo que puedes hacer (y no, no es sencillo como tomar un screenshot ya que tal cosa no existe en PHP) es enviar vía Javascript la posición x,y de cada "tile" de tu mapa al servidor, y después volver a formar la imagen usando la librería GD y así conformar la imagen tal cual la tenías en el cliente.

De hecho esta es la forma que muchos sitios lo hacen enviando coordenadas para poder ubicar en el mapa.

Saludos.

[ravalos7]

Amigo GatorV,


Gracias por tu respuesta aunque igual es complejo, pues como explicaba dentro de ese div contenedor no sólo estan los tiles que conforman el mapa, sino un monton de capas superpuestas con los puntos del mapa. Por eso que pensaba en alguna forma de capturar el contenido integro del div, renderizandolo y grabandolo en una img via php, el detalle que no se como :(

Les agradezco a todos desde ya, la ayuda que me puedan dar

Saludos desde Chile,


Ricardo

[ravalos7]

Amigo pateketrueke,

No es mi intención ofenderles, no seria muy lógico si estoy pidiendo su ayuda ;)


Lo anterior es sólo en ánimo de explicar mejor la situación que me aqueja, nada más.

Por tu pregunta, de PHP me manejo bastante, utilizo AJAX vía jquery en gran medida y muchas cosas más, pues programo hace hartos años ya. Con respecto al tema mapas, trabajo desde Diciembre pasado en una empresa de mapas en mi país. Antes de eso, cero conocimiento del tema mapas (salvo todo lo que cada uno aprendió en el colegio jejeje).

Actualmente me veo enfrentado al reto de elaborar el nuevo sitio de la empresa y hemos ido bastante bien, aunque me veo topado en este punto el que solucionandolo me facilitaria harto las cosas, pues me permitiria entre otras cosas imprimir, salvar, convertir a pdf y un monton de acciones màs con los mapas de un modo màs eficiente y menos complejo.


Saludos y gracias a todos amigos!!!

Ricardo

[GatorV]

Como te comento no es posible hacerlo, es la forma más cercana, enviar las posiciones y re-ensamblar en PHP el contenido.

Recuerda que PHP es un lenguaje que se ejecuta en el servidor y no en el cliente y por ende no puede "ver" lo mismo que tu vez, solo imprime HTML y sí este cambia en el cliente PHP no se entera.

Saludos.

[ravalos7]

Estamos claros con eso GatorV.

Es por eso que pensaba, continuando con la ciencia ficción de que si es posible hacerlo, de que si se pudiera llegar a un punto medio en donde vía javascript, jquery o algún otro framework se capturara el contenido del div renderizandolo y a través de ajax se pasara a php el lo grabe en una imagen.


Les reitero mi agradecimiento a todos


Saludos desde Chile,


Ricardo Avalos

[GatorV]

Pues actualmente no es posible, posiblemente en un futuro usando el elemento canvas de HTML5 para poder obtener el contexto gráfico de un div o elemento HTML, pero actualmente es muy límitado y todavía poder portearlo y enviarlo a PHP es mucho más complicado.

Pero si te quieres adentrar en eso, investiga como funciona el objeto canvas de Javascript sirve para hacer eso, dibujar en un elemento HTML (y solo funciona con navegadores muy recientes), posteriormente puedes a lo mejor serializar eso en un base64 y enviarlo a PHP, pero te repito es más complicado que lo que se puede escribir aqui.

Saludos.

[pateketrueke]

ravalos7, recordando mi pregunta... y según entiendo, ¿entonces es tu servidor el que genera los mapas??

si es así, ¿de donde obtiene dicha información para generarlos??

quizá ahí tienes todos los datos y ni te habías dado cuenta.... o bien, me equivoco y... ¿de donde obtienen los datos del mapa??

osea, me refiero a la fuente de los mismos....

[abimaelrc]

Si es que he comprendido lo que están indicando, en la librería GD hay un ejemplo de como colocar un watermark. Entiendo que es algo similar a lo que buscas. Yo traté con dos imagenes jpg y el resultado colocarlas encima una de la otra. El código que usé fue

Código PHP:

<?php
$stamp = imagecreatefromjpeg('imagenAlFrente.jpg');
$im = imagecreatefromjpeg('imagenAtras.jpg');
 
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);
 
imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));
 
header('Content-type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
 

Te debe colocar la imagen de alfrente a la extrema derecha abajo conforme al tamaño de la imagen. Sería cuestión de enviar las coordenadas de la imagen desde donde quieres que esté con alguna función en javascript haciendo una petición (si quieres a través de AJAX) y enviar la información de la imagen. ¿Cómo hacerlo? Ahí ya tienes que pensarlo