Necesitaba una solución para crear una captura de pantalla que un usuario pudiera generar a partir del contenido que se muestra en una aplicación de página web y guardarla en una galería. Después de buscar un poco, descubrí una manera fácil de hacerlo usando html2canvas.

Esta librería le permite tomar “capturas de pantalla” de páginas web o partes de ellas, directamente en el navegador del usuario. La captura se basa en el DOM y puede no ser 100% precisa para la representación real, ya que no hace una captura de pantalla real, pero construye la imagen en función de la información disponible en la página.

Requisitos

Para crear una captura de pantalla utilizaremos la biblioteca html2canvas. Puede descargar esta biblioteca con NPM usando el siguiente comando:

npm install html2canvas

O si prefieres bower:

bower install html2canvas

De lo contrario, solo obtenga una copia dela archivo ( html2canvas.min.js) en el repositorio aquí y luego agregue la libreria en su sitio web:

<script src="/js/html2canvas.min.js"></script>

Crea una captura

Si desea crear una captura de pantalla de todo su sitio web, debe pasar el elemento del cuerpo de su documento como primer argumento de la función html2canvas. Como devuelve una Promesa, debe agregar la función then que se ejecutará una vez que la exportación esté lista.

En este ejemplo, la captura de pantalla se generará en formato jpeg y se mostrará en una nueva ventana una vez que esté lista:

html2canvas(document.body).then(canvas => {
	const contentType = 'image/jpeg';
	const base64ImageData = canvas.toDataURL(contentType);
	const image = new Image();
	const w = window.open("", "_blank");

	image.src = base64ImageData;
	w.document.write(image.outerHTML);
});

Ver demo: https://soyfelixbarros.github.io/html2canvas-demo/