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 crear un CRUD con Django 2 y Bootstrap 4 – Parte 2 (Python 3.7)
-
Como crear un CRUD con Django 2 y Bootstrap 4 – Parte 3 (Python 3.7)
-
Como Integrar Firebase y Angular 7 + Listado de Datos desde Firebase – Parte 3 (Final)
-
Como cargar Datos JSON con un Spinner en jQuery Ajax
-
Haciendo Tracking a mis Correos Gmail
-
Como Leer un archivo JSON con Angular 8 + Tabla de Bootstrap 4
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.