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
-
Ingresar al maravilloso mundo de Pottermore Online
-
Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 2
-
Como usar React JS en Codepen IO
-
Sistema de Notificaciones con PHP, MySQL, jQuery Ajax y Bootstrap 4
-
Como crear un Archivo SVG con Adobe Photoshop CC y otros detalles
-
Creando una Aplicación Android que responda ante comandos de Voz mediante Inteligencia Artificial y Machine Learning – Parte 6
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).
Documentación: https://html2canvas.hertzen.com/configuration/
Las nuevas versiones de html2canvas también ofrecen otras opciones y métodos para escalar la imagen.
Me avisas como te fue.
Hola gracias por compartir. Quiero cambiar la textura de un modelo 3d en base a informacion cargada en un div, puedo generarlo el png en memoria?
Hola Lucas, bienvenido a la comunidad.
Si pero eso consume mucho RAM, deberías simplemente cargar el diseño renderizado a imagen png o jpg o que necesitas hacer realmente ?
y como deberia hacer para descargar el contenido de un div generado dinamicamente? Ya que la api funciona correctamente con divs estaticos, pero no le encontre la vuelta con divs que genero dinamicamente.
Saludos!
Como estas generando el div dinámicamente y con que Lenguaje de Programación o tecnologías ?