Convertir un bloque de HTML en una imagen con Canvas

Canvas (no confundir con el sitio de internet del mismo nombre), es una funcionalidad de HTML5 que permite generar y crear gráficos dinámicamente, mediante un script.
Se puede emplear para varias tareas, pero en este artículo explico cómo usarlo para convertir un bloque editable de una página en una imagen en formato PNG y descargarla al equipo mediante un botón.
Así funciona una herramienta de este sitio que he creado, para que los lectores pueden crear sencillas imágenes para compartir en las redes sociales, solo pegando el texto y modificando su apariencia y estilo.

Convertir el contenido de un DIV editable en Canvas

El texto del siguiente cuadro se puede editar y el resultado descargarlo como una imagen usando el botón más abajo.

A los que le interese esta funcionalidad pueden agregarle opciones adicionales para cambiar la fuente, el color del texto, el color de fondo, el borde, etc. usando JavaScript, como explico en el siguiente artículo: Como cambiar y modificar el estilo CSS de las páginas con Javascript

Código JavaScript y librerías

El cuadro anterior consiste en un elemento DIV (contenedor), que se le agrega la opción de editable.
HTML

<div id="figuras">
Texto...
</div>
<input type="button" class="btn tw" id="btnSave2" value="Descargar imagen">

JAVASCRIPT

<script>
document.getElementById('figuras').contentEditable = 'true';document.getElementById('figuras').designMode='on';
$(function() {
  $("#btnSave2").click(function() {
    html2canvas($("#figuras"), {
      onrendered: function(canvas) {
        saveAs(canvas.toDataURL(), 'canvas.png');
      }
    });
  });
  function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link. === 'string') {
      link.href = uri;
      link. = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } else {
      window.open(uri);
    }
  }
});
</script>

Es imprescindible cargar con la página tres librerías auxiliares:
- JQuery
- html2canvas
- canvas2image
Para obtenerlas solo se necesita guardar esta página en la computadora y extraer los scripts descargados.
Se recomienda acceder a los sitios web de los desarrolladores (en los créditos de los scripts) y comprobar si existe alguna versión reciente para descargar.

Comprueba en la siguiente página un uso práctico de Canvas en HTML para crear imágenes: Crear imagen con texto para Instagram

Páginas relacionadas



Comparte

Sígueme en las redes sociales