Estas cosas pueden ser muy útiles cuando se tienen grillas o información muy relevante en lo sitios y las personas las comparten mucho por redes sociales.

Cómo convertir etiquetas o tags HTML en imágenes para descargar y guardar usando el lenguaje Java Script

Como hemos dicho en un principio para poder generar la imagen o foto vamos a utilizar la librería html2canvas, la cual convierte código HTML en canvas. Primero para descargar la última versíon de la librería hay que ingresar al sitio oficial https://github.com/niklasvh/html2canvas/releases.

Descargamos el archivo y lo impartamos en nuestro código junto a la librería de jQuery, ya que la vamos a utilizar para simplificar algunas tareas:

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="html2canvas.js"></script>

Después para hacer la conversión es necesario tener algunas etiquetas o tags HTML y un botón para iniciar la descarga de la imagen como se muestra a continuación:

<div id="imagen">
  <p>Esto es una prueba para <strong>exportar código HTML</strong> a imagen en formato PNG. Ofrecido por ProgramacionExtrema.com<p>
</div>
<button id="boton-descarga">Descargar imagen</button>

Y finalmente necesitamos la lógica para convertir el HTML, para esto vamos a crear la función downloadCanvas, la cual recibe el id del div a convertir y el nombre final del archivo descargable:

 function downloadCanvas(canvasId, filename) {
     // Obteniendo la etiqueta la cual se desea convertir en imagen
     var domElement = document.getElementById(canvasId);

     // Utilizando la función html2canvas para hacer la conversión
     html2canvas(domElement, {
         onrendered: function(domElementCanvas) {
             // Obteniendo el contexto del canvas ya generado
             var context = domElementCanvas.getContext('2d');

             // Creando enlace para descargar la imagen generada
             var link = document.createElement('a');
             link.href = domElementCanvas.toDataURL("image/png");
             link.download = filename;

             // Chequeando para browsers más viejos
             if (document.createEvent) {
                 var event = document.createEvent('MouseEvents');
                 // Simulando clic para descargar
                 event.initMouseEvent("click", true, true, window, 0,
                     0, 0, 0, 0,
                     false, false, false, false,
                     0, null);
                 link.dispatchEvent(event);
             } else {
                 // Simulando clic para descargar
                 link.click();
             }
         }
     });
 }

 // Haciendo la conversión y descarga de la imagen al presionar el botón
 $('#boton-descarga').click(function() {
     downloadCanvas('imagen', 'imagen.png');
 });

Luego al presionar el botón de descarga se hará la conversión automática y la imagen se descargará en su computadora, para ver el ejemplo completo y funcionado ingrese aquí.

Detalles e inconvenientes a tener en cuenta

Dos puntos a tener en cuenta:

Para el caso en el que el contenido HTML que se desea convertir a PNG tenga imágenes, estas deben estar alojadas bajo el mismo dominio, ya que en caso contrario no se podrán visualizar por temas de seguridad.

Si la imagen exportada sale borrosa o se ve mal, le recomendamos modificar el código fuente de la librería. Básicamente debe cambiar la función getBounds por la siguiente:

 function getBounds(node) {
     if (node.getBoundingClientRect) {
         var clientRect = node.getBoundingClientRect();
         var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
         return {
             top: Math.floor(clientRect.top),
             bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
             right: Math.floor(clientRect.left + width),
             left: Math.floor(clientRect.left),
             width: width,
             height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
         };
     }
     return {};
 }

De esa forma el resultado será mucho mejor.

Bueno gente, eso es todo lo que hay que saber para poder exportar HTML a imagen en muy pocos pasos y utilizando Java Script con jQuery, espero que les sirva y ante cualquier problema no duden en dejar sus comentarios.

La entrada Convertir HTML en imagen con Java Script y jQuery para descargar aparece primero en ProgramaciónExtrema.com.

Cómo dibujar cuadrados en canvas con Java Script

Como primer paso tenemos que definir la etiqueta canvas en nuestro HTML de la siguiente forma.

<canvas id="micanvas" width="200" height="200">
  Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
</canvas>

Luego en Java Script vamos a obtener el contexto del elemento canvas para poder dibujar.

var elemento = document.getElementById("micanvas");
var contexto = elemento.getContext('2d');

Finalmente para dibujar un cuadrado solamante debemos usar la funcion fillRect(x, y, width, height) del contexto:

contexto.fillRect(100, 100, 50, 50);

Si visualizamos el cuadrado en el navegador el resultado sería el siguiente:

Cuadrado en canvas

Ahora si queremos cambiar el color del cuadrado solamente debemos utilizar el atributo fillStyle con el color hexadecimal:

contexto.fillStyle = "#FFBD16";

A continuación el código completo:

<!DOCTYPE html>
<html>
  <head>
    <title>Dibujar cuadrados en canvas con Java Script</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="micanvas" width="200" height="200">
      Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
    </canvas>
    <script language="JavaScript">
      window.onload = function(){
      	var elemento = document.getElementById("micanvas");
      	var contexto = elemento.getContext('2d');
		contexto.fillStyle = "#FFBD16";
      	contexto.fillRect(100, 100, 50, 50);
      }
    </script>
  </body>
</html>

Bueno gente, eso es todo lo básico que se necesita para dibujar cuadrados en canvas con Java Script. Espero que les sea de gran utilidad y ante cualquier problema no duden en enviar un comentario.

La entrada Dibujar cuadrados en canvas con Java Script aparece primero en ProgramaciónExtrema.com.