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
Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 1
Validando un Formulario con React JS 16.13.1 – Parte 1
Creando una Aplicación Android que responda ante comandos de Voz mediante Inteligencia Artificial y Machine Learning – Parte 6
Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 2
Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 3
Como crear un CRUD con Django 2 y Bootstrap 4 – Parte 2 (Python 3.7)
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.
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.
Hola, quizás necesitas ajustar la escala.
Puede usar las opciones de escala en html2canvas para aumentar la resolución (escala: 2 duplicará la resolución de los 96 ppp predeterminados).