Convertir el Contenido de un Div en Imagen.

Nube Colectiva

hace 9 años

En esta página:

Demo Github

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:


js/jquery.js
js/filesaver.js
js/html2canvas.js

js/jquery.js

js/filesaver.js

js/html2canvas.js

index.html

Nuestra vista HTML para los elementos de nuestra aplicación:


<!-- 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>

<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>

</div>

<button id="crearimagen" class="form-control"></button>Crear Imagen

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:


$(function() { 
          $("#crearimagen").click(function() { 
              html2canvas($("#contenido"), {
                  onrendered: function(canvas) {
                      theCanvas = canvas;
                      document.body.appendChild(canvas);

                      /*
                      canvas.toBlob(function(blob) {
                        saveAs(blob, "Dashboard.png"); 
                      });
                      */
                  }
              });
          });
      });

$(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 !