Convertir el Contenido de un Div en Imagen.

Tutoriales

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

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

Artículos Relacionados

Comentarios

avatar
  Subscribirse  
Notificar a