convertir de un div a una imagen

[ilen]

Hola, necesito por trabajo saber como transformo todo lo que tiene un div a una imagen por ejemplo:

Código HTML:

<div id="imprimir">
 imagenes
 texto
 etc....
</div>
 

todo lo que tiene el div con php o javascript tranformalo en una imagen como una captura para descargar o guardarlo al servidor.... alguien ya lo ha hecho ??? necesito ayuda.

[KsrZ]

si entendi bien.. eso lo logras solo con html y un poco de js.. o bien tambien con css
declarare una imagen al div (background:url(tu/pagina/a/la/imagen.jpg); ).. y crea una funcion con el evento OnClick en el div, que de un enlace directo de descarga a la imagen.. es algo asi?

[ilen]

No, lo que necesito es que todo lo que tiene un DIV convertirlo en una sola imagen...

[pateketrueke]

¿Te refieres a crear una imagen exactamente igual a como se visualiza el div?

[ilen]

Si, todo lo que se encuentre en el DIV convertirlo en imagen, mira esta es la pagina


la cancha de en medio esta dentro de un DIV quiero eso convertirlo en una imagen....

[pateketrueke]

Pues el concepto de "copiar todo el div y convertirlo en una imagen" no existe en php, recuerda que lo que ves en el navegador ahí se queda, y evidentemente php se ejecuta en el servidor y no en el navegador.

En dado caso debes reproducir lo que se ve utilizando librerías para el manejo de imágenes con PHP, en tal caso es comenzar de cero a formar la imagen, etc.

Lo que si puedes hacer es únicamente pasar los datos de tu navegador al servidor, para que tus scripts en php generen la imagen con los mismo datos.

De ahí en fuera no hay magia que haga lo que piensas, al menos no con php.

[ilen]

tiene que haber una manera por jquery, javascript o php.....

[pateketrueke]

Iniciado por ilen

tiene que haber una manera por jquery, javascript o php.....

A ver, ¿que parte es la que no entiendes?

Pasar los datos se sencillo, eso a todos nos queda claro, sin embargo la idea de "copiar el div y pegarlo en una imagen" es bastante absurdo.

PHP cuenta con librerías para manejo de imágenes eso es cierto, pero no existen métodos mágicos para lograr lo que imaginas, ¿pues hacia donde lleva tu necedad?

Aquí el procedimiento es crear la imagen desde cero con PHP, como ya te lo dije.

Conozco otra forma, y la verdad no te voy a mentir, yo mismo he visto como se hace. Es mediante Javascript del lado del servidor (ojo, no del cliente) utilizando PhantomJS que es básicamente un fork de Webkit compilado como utilidad de consola.

La idea es básicamente cargar la pagina y exportar lo que se renderiza en SVG o PNG.

Si quieres puedes investigar como hacerlo así, pero de cualquier forma se sale del foro de php, así que en resumen:

1. jQuery es Javascript, deberías saber, no te muerdas la lengua.
2. Con PHP si es posible, pero no de la forma mágica que esperas.

[ilen]

esta pagina ya lo hizo http://alineaciones.es/

[pateketrueke]

Iniciado por ilen

esta pagina ya lo hizo http://alineaciones.es/

¿Y cuando he dicho yo que sea imposible?

¡Claro que es posible!

Pero hay que hacerlo de cierta forma, y eso ya te he dicho como.

Por favor consulta el manual de GD para que aprendas a hacerlo, eso es lo que debes hacer.

PDTA: de hecho es bastante sencillo usando PHP también, si me lo preguntas.

[KsrZ]

php creo no es la mejor solución, ahí en eso tienes razón ilen, jquery tiene un plugin creo, que convierte la pagina del navegador en una imagen... o bien prototype.
no recuerdo

[ilen]

con GD hay una forma usando un for($i=0;$i<=total_bola_img) y comienzas a crear una sola imagen.... pero el problema que las bolas no son imagenes, son DIV entonces GD puede crear una imagen apartir de 1 o mas imagenes, pero ese es mi problema las bolas no son imagenes y no la puedo hacer imagen por que uso colorpiker para cambiarle los colores de la camisa,pantalon,media....

[pateketrueke]

Pues yo no veo la complicación, siendo creativo ya tienes el color hexadecimal de los objetos que usas.

Simplemente es crear una imagen transparente y de color solido para la camisa, por ejemplo, y usar las funciones de GD para reemplazar dicho color por el que desees.

El hecho de que sean divs no les resta valor como elementos gráficos, así que con un poco de ingenio de tu parte podrías recrearlos con GD.

[ilen]

ok en vez de cambiar los colores a las bolitas, tratare de crear la imagen ponerlas en una carpeta temporal y reemplazar la imagen a las bolitas por jquery.... veremos como me va

[miguec04]

Yo se que no se permite revivir temas viejos, pero al ver que no hay una respuesta para este tema me gustaria dar una. y es la siguiente, se puede pasar primero todo a PDF y despues ese pdf pasarlo a JPG O UNA IMAGEN dejo el link del ejemplo para que lo vean.

http://www.binarytides.com/convert-p...agemagick-php/

[marlanga]

No hay forma humana de convertir HTML a imagen desde el navegador. Hay librerías javascript que recorriendo el DOM de la página y sus atributos CSS, son capaces de hacer una aproximación del aspecto de la imagen en un CANVAS, que permite generar un JPG o PNG con uno de sus métodos. Sus resultaods a veces son muy buenos, y otras veces no tanto; depende del contenido de la página y de que sus atributos CSS no sean muy especiales.ç

En el ejemplo que puso, es un DIV controlado, es decir, el servidor sabe qué es lo que hay dibujado en ese DIV. Basícamente es una imagen del cesped, y una imagen del dorsal de cada jugador. Los dorsales se pueden pinchar y arrastrar, asi que lo único que necesita saber el servidor, son las posiciones finales de los dorsales que el usuario arrastró. Esa información se manda al servidor, y el servidor con la librería GD es facilísimo dibujar la imagen de cesped de fondo, y los dorsales en las posiciones que le llegó por GET o POST.

[miguec04]

pues se me hace mas fácil pasar todo el html que necesito por POST para convertirlo en PDF y de ahí generar la imagen jpg que necesito.

[temaqueja]

Por ejemplo: http://experiments.hertzen.com/jsfeedback/

Iniciado por marlanga

No hay forma humana de convertir HTML a imagen desde el navegador. Hay librerías javascript que recorriendo el DOM de la página y sus atributos CSS, son capaces de hacer una aproximación del aspecto de la imagen en un CANVAS, que permite generar un JPG o PNG con uno de sus métodos. Sus resultaods a veces son muy buenos, y otras veces no tanto; depende del contenido de la página y de que sus atributos CSS no sean muy especiales.ç

En el ejemplo que puso, es un DIV controlado, es decir, el servidor sabe qué es lo que hay dibujado en ese DIV. Basícamente es una imagen del cesped, y una imagen del dorsal de cada jugador. Los dorsales se pueden pinchar y arrastrar, asi que lo único que necesita saber el servidor, son las posiciones finales de los dorsales que el usuario arrastró. Esa información se manda al servidor, y el servidor con la librería GD es facilísimo dibujar la imagen de cesped de fondo, y los dorsales en las posiciones que le llegó por GET o POST.

[marlanga]

Iniciado por miguec04

pues se me hace mas fácil pasar todo el html que necesito por POST para convertirlo en PDF y de ahí generar la imagen jpg que necesito.

Si mandas el HTML, no verás lo mismo porque no sabes cómo están los estilos de cada elemento. Entre otros muchos problemas.

[miguec04]

los estilos se pueden enviar por post tambien, y se organizan en el html que se va a generar en PDF, siento que se puede generar unas clases mas dinamicas pra que se puedan generar imagenes

[marlanga]

Hazlo. Si consigues un plugin javascript+php que haga fotos de páginas dinámicamente, y que funcione bien, te forras.

[ilen]

Gracias por la respuesta