Convertir el Contenido de un Div en Imagen.
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:
1 2 3 | js/jquery.js js/filesaver.js js/html2canvas.js |
index.html
Nuestra vista HTML para los elementos de nuestra aplicación:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- Lo que esta dentro del div id="contenido" es lo que se exportara como imagen presionando un botón --> <div class="row" id="contenido"> <div class="col-md-4"> <h5 style="font-weight: bold;color: pink">Torta de Chocolate</h5> <p> La deliciosa Torta de Chocolate es uno de los postres mas ricos del mundo, estos están en los mejores comensales. </p> <img src="https://blog.nubecolectiva.com/convertir-contenido-div-en-imagen/" class="img-responsive" /> </div> </div> <!-- El botón que presionaremos para exportar a imagen el contenido del div id="contenido" --> <button id="crearimagen" class="form-control"></button>Crear Imagen <!-- El div id="img-out" sera el contenedor en donde visualizaremos la imagen exportada --> <div id="img-out" align="center"></div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(function() { $("#crearimagen").click(function() { html2canvas($("#contenido"), { onrendered: function(canvas) { theCanvas = canvas; document.body.appendChild(canvas); /* canvas.toBlob(function(blob) { saveAs(blob, "Dashboard.png"); }); */ } }); }); }); |
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
Artículos Relacionados
Como Integrar Firebase y Angular 7 + Listado de Datos desde Firebase – Parte 1
Mostrar datos MySQL en JSON con Node JS 8 y Express JS 4
Cómo crear un Bot para Facebook Messenger con Node JS
Que es Laragon y otros Detalles + Desplegar un Proyecto Laravel 5.8
Crear un sitemap dinámico con PHP y MySQL (Corregido 29-07-2019)
Mostrar Errores PHP en Servidor Linux Ubuntu 14.04 de Digital Ocean
La versión que se encuentra en github no funciona correctamente
Hola Arsenio, acabo de probar la versión de GitHub y funciona sin problemas.
Puedes ver una captura de pantalla de la prueba que hice: https://github.com/collectivecloudperu/convertir_imagen_contenido/blob/master/img/cdici.jpg
Estuve probando en una mac y no me hizo la captura de las fotos, del texto sí. Cuál podría ser el problema?
Hola, verifica si están bien encapsulados los divs o sube tu código a GitHub y comparteme el enlace para revisarlo.
Ya funciona, muchas gracias!
Felicidades, sigue adelante.
Como lo conseguiste?
Olvide preguntarle eso a Arsenio, espero que pueda responder. Si necesitas alguna ayuda solo déjame tu comentario juan.
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?
Hola Juan. Entiendo, puedes usar el siguiente código:
https://pastebin.com/BPPX69P3
Me avisas como te fue.