Convertir el Contenido de un Div en Imagen.

Tutoriales |

Demo Github

Si deseamos en algún momento facilitar un contenido determinado a nuestros usuarios dentro de nuestra Página web o Aplicación seria de gran ayuda poder brindarle un botón para obtenerlo con un solo click.
En este Artículo les voy a enseñar a convertir el contenido de una div a imagen, esta imagen descargada se puede enviar a un correo, compartirla en las redes sociales, etc.

Primero instanciamos nuestros elementos a nuestra vista:

index.html

Nuestra vista HTML para los elementos de nuestra aplicación:

script.js

Le decimos que el contenido de nuestro div=”contenido” se exporte como imagen al presionar el botón id=”crearimagen” en nuestra página html:

Eso es todo, espero que les sea de mucha utilidad.

En la Demo y el repositorio Git pueden obtener y ver el código Fuente.

Espero les sea de mucha utilidad este Artículo.

Hasta nuestro siguiente Artículo o Tutorial !

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
11 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Arsenio
Arsenio
3 meses atrás

La versión que se encuentra en github no funciona correctamente

Arsenio
Arsenio
Reply to  Nube Colectiva
3 meses atrás

Estuve probando en una mac y no me hizo la captura de las fotos, del texto sí. Cuál podría ser el problema?

Arsenio
Arsenio
Reply to  Nube Colectiva
3 meses atrás

Ya funciona, muchas gracias!

juan
juan
Reply to  Arsenio
22 días atrás

Como lo conseguiste?

Juan
Juan
2 meses atrás

hola,¿ como puedo hacer si no quiero descargar la imagen, en vez de eso quisiera presentarla en otra ventana y habilitar el cuadro de diálogo de impresión?