En este post voy a explicar y a dar algunos ejemplos para convertir el contenido de una página web a una imagen, es decir, tomarle una “captura de pantalla” a la página web usando únicamente JavaScript del lado del cliente y la maravillosa librería de html2canvas.

Voy a mostrar cómo adjuntar el elemento canvas al documento, descargar la imagen, ignorar algunos elementos al tomar la captura de pantalla, respetar los estilos CSS y poner el resultado sobre un canvas existente.

La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más.

El funcionamiento de esta librería es sencillo: lee todo el DOM, es decir, todo el documento HTML y construye una representación del mismo en un elemento canvas, leyendo los estilos y formas que tiene. Los resultados, si bien no son siempre perfectos, son bastante aceptables.

Citando al autor:

En otras palabras, no toma realmente una captura de pantalla de la página, sino que construye una representación de la misma en función de las propiedades que lee del DOM.

Después de tener el elemento canvas podemos adjuntarlo a la página web o convertirlo a imagen.

Nota: todos los ejemplos que expondré puedes probarlos aquí, y el código completo de todos y cada uno están en mi GitHub. Tal vez en ocasiones me salte algún fragmento de código, pero puedes revisar el repositorio y ahí estará todo lo necesario.

Incluir librería

Incluye la librería de html2canvas como un script normal. Puedes descargarlo por tu cuenta, en la página oficial hay dos enlaces, uno a la versión normal y otro a la minificada, la normal es para que analices el código y la minificada lista para ser usada en producción.

También puedes incluirla desde jsdelivr como lo hago en los ejemplos:

Al final todo queda en el tipo de aplicación que hagas.

Capturas de pantalla con JavaScript: primer vistazo

Veamos un primer ejemplo. Para capturar la página web llamamos a la función html2canvas pasándole un elemento HTML.

Este elemento puede ser document.body o cualquier otro obtenido, por ejemplo, con querySelector.

html2canvas devolverá una promesa que, al resolverse, traerá un elemento canvas. Ese elemento podemos montarlo en el documento o convertirlo a imagen.

Puedes probar el ejemplo aquí.

Tomar captura respetando estilos CSS

La librería soporta muy bien los estilos del documento. En el siguiente ejemplo uso los estilos de Bulma CSS y agrego una notificación y una tabla.

Puedes probarlo aquí.

Capturar todo el cuerpo

En los ejemplos anteriores capturamos un div, no todo el cuerpo. Si queremos capturar todo el cuerpo simplemente pasamos document.body a html2canvas.

Pruébalo aquí.

Si quieres ignorar algunos elementos más tarde veremos cómo hcaerlo.

Descargar imagen generada

Si no te interesa el elemento canvas y quieres una imagen PNG entonces hay que aplicar algunos trucos para convertir el canvas a imagen, lo cual ya expliqué anteriormente.

El código es el siguiente:

De esta manera no podemos el canvas en el cuerpo ni en un contenedor, sino que simplemente descargamos la imagen y la guardamos como PNG.

Prueba el ejemplo de descarga de imagen aquí.

Ignorar algunos elementos al tomar la captura

La librería html2canvas permite ignorar algunos elementos a través de una función que se especifica en las opciones.

Esta función recibe el argumento del elemento HTML que está a punto de renderizarse. Si regresamos true, el elemento se va a ignorar. Si no, el elemento se renderiza.

En el ejemplo se ignoran los elementos de imagen y encabezados, pero podríamos hacer una selección más precisa por clases, ids, etcétera; ya que tenemos al elemento completo.

Por cierto, la documentación dice que si ponemos el atributo data-html2canvas-ignore a un elemento, el mismo será ignorado.

Prueba el código aquí.

Colocar captura de pantalla en canvas existente

Si ya tenemos un canvas definido, podemos poner la captura de pantalla tomada con html2canvas sobre el mismo, usando las opciones.

Específicamente indicamos la clave “canvas” en las opciones, el valor debe ser un elemento HTML de canvas.

Pruébalo aquí.

Conclusión

Solo resta decir que esta librería es muy poderosa y útil en varios aspectos. Te dejo un enlace a la documentación oficial para las opciones, en donde puedes ver cómo cambiar el color de fondo, cortar el canvas, etcétera.

Muy pronto traeré algunos otros ejemplos de esta librería, te invito a suscribirte al blog y seguirme en todas las redes.