Las capturas de pantalla de las aplicaciones web (o sitios web) son una forma bastante buena de arreglar errores de nuestros programas reportados por usuarios, ya que gracias a ellas podemos ver qué error aparece o cuál es el problema que reportan (sobre todo de diseño).

En el mundo de JavaScript existe la librería html2canvas cuyo uso ya vimos anteriormente, de hecho esto podría ser la continuación del mismo, en donde veremos cómo enviar una captura de pantalla a un servidor con PHP.

Aunque el ejemplo muestra cómo recibir la captura de la webapp con PHP, podemos adaptar el código para otros lenguajes del servidor.

¿Qué vamos a hacer?

Vamos a hacer una demostración para tomar una captura de una página web con html2canvas y después enviar la captura a un servidor con PHP.

Esta captura será enviada al hacer click en un botón, pero puede ser enviada incluso sin la acción del usuario (así que cuidado con los ataques XSS) en cualquier momento.

Puedes ver el código final y actualizado en mi GitHub. Por cierto, si quieres hacer esto con Node.JS ya he escrito el tutorial hace algún tiempo.

Requisitos y posts recomendados

A través del post veremos muchas cosas que ya he explicado a fondo en otros lugares.

El post más importante es en donde usamos html2canvas para tomar una captura de una página web pero sin enviarla a ningún lado, sino adjuntarla o guardarla localmente.

Aparte de eso, en JavaScript utilizo las backticks y funciones flecha, codifico con JSON y finalmente en PHP lo decodifico para escribir el contenido en un archivo.

Por cierto, también te recomiendo ver el tutorial para tomar una foto de la cámara web con JavaScript y enviarla a PHP.

Nota: si no tienes PHP mira este post para instalarlo, o este otro en donde lo instalamos sobre Android.

La página web

Es un sitio web con una imagen, una tabla y algo de contenido.

See the gist on github.

Lado del cliente: tomar captura con JavaScript

En JavaScript le tomamos la foto al cuerpo completo; no ignoramos elementos ni capturamos otros elementos pero es totalmente posible como lo vimos en el post anterior.

La parte que cambia es que convertimos el canvas a imagen pero no la descargamos, sino que esa cadena en base 64 la enviamos a nuestro servidor usando AJAX a través de la función fetch.

See the gist on github.

Si te fijas, he usado JSON para enviar los datos, ahí puedes adjuntar más datos si lo requieres.

Recibir captura con PHP y guardar la imagen en un archivo

En el lado del servidor accedemos al cuerpo de la petición y lo decodificamos con JSON.

Quitamos el “data/image…” de la imagen si es que lo tiene, decodificamos con urldecode lo que codificamos con encodeURIComponent, la imagen en base 64 la decodificamos igualmente y llamamos a file_put_contents para guardar la imagen.

See the gist on github.

Finalmente imprimimos el nombre de la imagen guardada para que sea la respuesta que reciba JavaScript, y de nuevo lo digo, en la vida real podríamos enviar y recibir más cosas de acuerdo a las necesidades.

Conclusión

La combinación de JavaScript y PHP hace que nuestras apps tengan más funcionalidades sin importar su propósito.

En este ejemplo hemos visto cómo enviar una captura de pantalla a PHP, lo cual podríamos usar para recibir reportes de errores y ver exactamente lo que está pasando.