Convertir el Contenido de un Div en Imagen.

Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

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
15 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Arsenio
Arsenio
8 meses atrás

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

Arsenio
Arsenio
Reply to  Nube Colectiva
8 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
8 meses atrás

Ya funciona, muchas gracias!

juan
juan
Reply to  Arsenio
5 meses atrás

Como lo conseguiste?

Juan
Juan
7 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?

Mauricio
Mauricio
4 meses atrás

muchas gracias por tu ayuda, funciona super bien, solo tengo un problema con la calidad de la imagen que se descarga, hay alguna manera de mejorar la calidad? la que estoy usando de fondo es bastante buena pero una vez descargada no se ve bien y se pixela, gracias nuevamente.