Cómo lanzamos una captura de pantalla sin capturas de pantalla
Algunos comentarios son más fáciles de mostrar que de describir. Activa la selección de elemento en una encuesta y un visitante podrá señalar una parte concreta de tu página — un botón, un titular, un campo de formulario — en lugar de escribir «el botón azul de arriba». En el detalle de la respuesta obtienes una imagen limpia y con todos sus estilos de exactamente ese elemento, junto a una instantánea de página completa con él resaltado.
Conseguirlo significaba renderizar páginas que no son nuestras, en dominios que no controlamos, dentro de un motor de navegador real — y devolver un recorte correctamente estilizado de un elemento de esas páginas. La primera versión probó lo obvio: capturar el propio marcado del elemento pulsado y renderizar solo esa pieza, por sí sola. Se veía correcta en todas las pruebas que escribimos, porque en todas ellas el elemento tenía estilos en línea. En cuanto el botón de una página real obtenía su aspecto de una clase de una hoja de estilos externa, el recorte volvía plano y sin estilo. Un fragmento aislado no tiene una cabecera de página de la que enlazar una hoja de estilos, ni un bloque de estilos, ni variables CSS con las que esa clase pueda resolverse — nada estaba roto, simplemente no había nada ahí a lo que aplicar los estilos.
La solución consistió en renderizar toda la página en lugar del elemento por sí solo. El selector ya marca el elemento pulsado en el instante en que se elige, así que renderizamos toda la página capturada del visitante una vez, con sus hojas de estilos y su diseño reales, y tomamos dos capturas de esa misma página cargada: la página completa, y un recorte ajustado de solo el elemento marcado. Ahora una sola carga de página del navegador produce ambas imágenes, lo cual es también menos trabajo que los dos renderizados independientes que se necesitaban antes.
Nada de esto cambia lo que experimentan los visitantes — siguen simplemente haciendo clic en la parte de la página que quieren señalar. Lo que cambia es lo que ocurre después: una imagen real y con estilos correctos de exactamente esa parte, no una suposición reconstruida a partir de una descripción escrita.