SummArg | Cursos y recursos para webmasters

23/06/2015

Captura de pantalla selectiva con html2canvas

Html2canvas es un script que nos permite generar capturas de pantalla en formato de imagen tomando los elementos HTML y CSS con bastante exactitud. Obviamente puede presentar algunas complicaciones con determinados recursos de CSS3 y con imágenes SVG, pero en general funciona muy bien con el grueso de las webs.

En esta oportunidad les mostramos como hacer para hacer una captura de pantalla de un div en un popup.

Primero descargamos el stript desde el sitio oficial y lo insertamos en nuestra web.

Luego encerramos en un div con id #print todo lo que querramos imprimir y generamos un link con id #printeame que será nuestro botón de imprimir. Vale aclarar que es posible que le tengamos que dar una propiedad de float:left al div #print para que no arroje error.

<script type="text/javascript" src="/js/html2canvas.js"></script>
script language="javascript">
$( document ).ready(function() {
$("#print").click(function(e){
e.preventDefault();
	html2canvas($("#print"), {
		onrendered: function (canvas) {
			var myImage = canvas.toDataURL("image/png");
			window.open(myImage);
			window.document.close(); // necessary for IE >= 10
			window.focus(); // necessary for IE >= 10
			window.print();
			window.close();
			}
		});
	});
});
</script>

De este modo se abre un popup con la imagen a imprimir, se imprime y se cierra nuevamente.

Se puede llevar mas allá la funcionalidad si guardamos esa imagen generada en el servidor, para lo cual les recomiendo leer este artículo en el sitio de kubilayerdogan.net.

Dejar un comentario