Guardar el contenido de un div como imagen

Hamn · #1 (**permalink**) 14/04/2011, 16:10

Amigos me urge, esto no se si alguien se le ocurrio de convertir el contenido dentro de un div y guardarlo como imagen .JPG al estilo de pdf.

quiero hacer una captura del contenido del div como un screenshot o captura de pantalla y que el usuario pueda guardar esa imagen en su pc y enviarlo por email.

Ejemplo:

Código:

<div id"principal" title="guardar como imagen todo el contenido de este div inluyendo div internos">
<div id="contenido">
<div>Contendio dentro del div a guardar como imagen</div>
</div>
</div>

pixel1 · #2 (**permalink**) 14/04/2011, 17:08

Creo que esto es tema de javascript

Hamn · #3 (**permalink**) 14/04/2011, 20:01

Lo he buscado en el de javascript pero no he encontrado un resultado

Nano_ · #4 (**permalink**) 14/04/2011, 20:38

Saludos

Te podrias explicar mejor, la imagen la cargan? ya esta alojada en el servidor?... Que es exactamente la funcionalidad que buscas.

Netyco · #5 (**permalink**) 14/04/2011, 21:26

Lo que yo buscaria de hacer es de almacenar el texto de ese DIV en una variable de PHP, para de esa forma manipular el contenido de esa variable con la libreria GD.

La libreria GD te permitirá crear la imagen.
Aqui un ejemplo que quizas te resulte de utilidad: http://blog.video2brain.com/mx/truco...ibreria-gd.htm

Hamn · #6 (**permalink**) 14/04/2011, 21:31

Cita:

Iniciado por Nano_

Saludos

Te podrias explicar mejor, la imagen la cargan? ya esta alojada en el servidor?... Que es exactamente la funcionalidad que buscas.

Mira tengo un sitio donde, genero un cupon de descuento, ese cupon es generado dentro de un div y contenido dinamico desde una db, quiero que el usuario tenga la posibilidad de guardar lo que ve en pantalla, todo el contenido del div como una imagen.

como capturar un screenshot y guardarlo en su maquina, no lo quiero hacer como pdf es mejor como una imagen.

Netyco · #7 (**permalink**) 14/04/2011, 21:38

Amigo Hann, a ese cupon de descuento lo tienes en formato de imagen?

si es asi, puedes "forzar la descarga" con php y listo, busca sobre eso en google y contraras miles de ejemplo de como hacerlo...

Hamn · #8 (**permalink**) 14/04/2011, 21:51

Cita:

Iniciado por Netyco

Amigo Hann, a ese cupon de descuento lo tienes en formato de imagen?

si es asi, puedes "forzar la descarga" con php y listo, busca sobre eso en google y contraras miles de ejemplo de como hacerlo...

No, es una pagina html, con diseño de un bono o cupon de descuento. si fuese ya una imagen no tendria problema, es un html con muchos div's donde hay uno principal que contiene todos los datos del bono

Miren hice una captura de la web con el diseño del bono sin el contenido dinamico, el contenido dinamico es datos que llamo desde la db, por eso se ve con las variables.

http://img820.imageshack.us/i/bonod.png/

la idea es hacer de esto una imagen descargable. que al lado del boton imprimir haya un boton que diga descargar, ahi el proceso seria convertir ese html en imagen y descargarlo.

Netyco · #9 (**permalink**) 14/04/2011, 21:53

Entonces como te dije mas arribacon la libreria GD podras hacer eso.

Pasa todo el texto a variables y con GD generas la imagen...

Hamn · #10 (**permalink**) 15/04/2011, 10:51

Amigos no he usado esta libreria,
este es el codigo sin la css para que no sea tan largo, cuando se muestre esto en la pantalla del usuario, este debe poder guardar lo que ve como una imagen.

Código PHP:

  <body>

<div id="ecard">

<div id="econ">

<!--top -->

<div id="etop">

<div id="logo"><img src="/static/css/i/logo.png" width="130" height="75" /></div>

<div id="welcome"><strong>{$team['product']}.</strong></div>

</div>

<!--endtop -->

<!--<div id="teamtitle"><br />

{$team['product']}.</div>-->

<!--main -->

<div id="main">

<div id="mleft">

<div id="imagen" align="center"><img src="${team_image($team['image'])}" width="271" height="158" /></div>

<!--<div id="name">Usalo Antes de:</div>-->

<!--<div id="relname">${date('Y year n month j date', $coupon['expire_time'])}</div>-->

</div>

<!--right -->

<div id="mright">

<!--<div id="name">tip</div>

<div id="notice">{$team['notice']}</div>-->

<div id="name">Que debes Hacer?</div>

<div id="notice">

<ul>

    <li>1&#12289;Imprime tu Bono</li>

    <li>2&#12289;Contacta a <strong>{$partner['title']}</strong> para reservar</li>

    <li>3&#12289;Presenta tu bono al anunciante antes de consumir: <strong>{$partner['address']} - Tel：{$partner['phone']} </strong></li>

    <li>4&#12289;Recuerda redimir tu Bono antes de su fecha de vencimiento: <strong>${date('Y-m-d', $coupon['expire_time'])}</strong> / <font size="4">Valor de tu Bono: $ <strong>{$team['market_price']}</strong> Pesos.</font></li>

</ul><div id="coupon">

    <p style="background-color:#9C0">Bono No: {$coupon['id']}</p><hr />

    <p style="background-color:#9C0">Código Secreto: {$coupon['secret']}</p>

</div>

</div>

 
</div>

 
 
</div>

<!--endmain -->

 
<!--footer -->

<div id="footer">

<div class="caracteristicas"><strong>Caracteristicas:</strong>

{$team['notice']}</div>

 
<div class="condiciones"><strong>Condiciones:</strong>

{$team['systemreview']}</div>

</div>

<div id="server">Entra en {$INI['system']['wwwprefix']}/nosotros/terminos.php para ver los términos y condiciones legales completos.</div>

 
</div>

 
</div>

 
<div class="noprint" style="text-align:center; margin:20px;">

  <button style="padding:10px 20px; font-size:16px; cursor:pointer;" onclick="window.print();">Imprimir tu {$INI['system']['couponname']} Ahora</button></div>

</body>

Netyco · #11 (**permalink**) 19/04/2011, 11:31

No entiendo Hamn sinceramente.

Hace ya un tiempoq eu te vengo diciendo que lo tienes que hacer con la libreria GD para generar la imagen...

Basicamente tienes que hacer esto:

1) Muestras en pantalla el texto (con el CSS que tienes)
2) con PHP haes una imagen (con los mismos textos que en el CSS)
3) Fuerzas la descarga de la imagen.

Por lo tanto...

1) El CSS ya lo tienes, perfecto no le muevas a eso
2) Ahora genera la imagen, con la libreria GD podras haerlo...
3) Fuerza la descarga

Enlaces que te ayudaran:
Para crear la imagen: http://www.programacionweb.net/artic...iculo/?num=313 aqui (dale a siguiente tienes un tutorial sobre GD)

Para forzar la descarga: http://www.cristalab.com/tutoriales/...con-php-c166l/

Saludos y espero que puedas resolverlo.