¿Cómo tomar una captura de pantalla de una sección desplazable incrustada en un sitio web?

3

Si te diriges a la sección de búsqueda de tiendas de Walmart y escribes tu código postal, obtendrás una lista de 20 tiendas junto con un mapa al lado. Me gustaría tomar una captura de pantalla del mapa Y la lista en su totalidad. No me importa hacer dos pasos: 1) el mapa y 2) la lista.

Sin embargo, no puedo entender cómo obtener una captura de pantalla de esa larga lista. Como puede ver, solo una pequeña porción de la lista es visible. Además, no tiene que ser una captura de pantalla. Estaría satisfecho con copiar y pegar, pero la estructura de la lista se destruye cuando hago eso. Los elementos en el lado derecho de la lista (Opciones de recolección y En esta tienda) terminan yendo al final en lugar de a la derecha como están.

screenshot Rolo
fuente

Respuestas:

1

No es realmente una captura de pantalla de página completa, ya que la parte que le interesa al póster está oculta

Mi solución requiere inquietud pero funciona.

Lo explicaré usando Firefox, pero se pueden lograr operaciones similares con navegadores modernos que ahora tienen un inspector html / css incorporado.

  • haga clic derecho dentro de la lista desplazable, muy cerca de la esquina superior izquierda, seleccione "Inspeccionar elemento": aparece una ventana emergente con código HTML a la izquierda y CSS a la derecha

  • en la pantalla de código HTML, busque una entrada que diga <div id="resultStores" style="height:311px;"></div>. Edite esa entrada, reemplazando la figura entre height:y px;con la palabraauto

=> <div id="resultStores" style="height:auto;"></div>

  • mira por encima de esa entrada, encontrarás otro div, <div id="searchInfo">

  • observe en el panel CSS a la derecha un bloque titulado #searchinfocon overflow: hiddenél. Reemplace la palabra hiddencon la palabravisible

Tada, tu página ahora debería mostrar la lista completa

Familiarícese con el proceso, y ahora es el momento de instalar una utilidad de captura de pantalla de página completa. Con Firefox, recomiendo el complemento Fireshot .

  • establecer altura de <div id="resultStores">aauto
  • establecer desbordamiento de <div id="searchInfo">avisible
  • con la misma herramienta de inspección, también puede eliminar los dos bloques en el pie de página, que se interpondrán y estropearán una parte de la captura de pantalla: haga clic derecho para inspeccionar esos elementos, haga clic derecho nuevamente para eliminar el nodo, repita.
  • haga clic derecho en la página y use FireShot para capturar la página completa.

Et voilà :)

Espero que ayude.

Sxilderik
fuente
Todavía hay un pequeño problema. Los anuncios en la parte inferior se muestran a través de la lista. En otras palabras, la lista es transparente. PD: estaba tratando de hacer lo que me sugirió aquí, pero solo cambié los 311 px, y no sabía sobre la segunda porción ni lo habría resuelto.
Rolo
Como dije, use el inspector para eliminar los anuncios y el pie de página. Ah, y si usa Firefox o Chrome, puede optar por deshacerse de los anuncios por completo usando AdBlockPlus. :)
Sxilderik
Lo hice con Firebug en Firefox. No entiendo cómo funciona con Firefox Inspector. es decir, busco 311 px y no aparece nada. Además, ¿la página de Walmart realmente no tiene / body y / html o están incluidos en uno de los scripts js?
Rolo
También utilizo FireBug de forma rutinaria, pero como no dijo nada sobre el navegador que está utilizando o su dominio en esta área, opté por lo simple y estándar. Si "inspecciona" justo dentro de la esquina superior izquierda (usando el inspector FF incorporado), la altura: 311px debería aparecer inmediatamente. En cuanto a la página de walmart, de hecho parece que el codificador eligió ser flojo y omitió cerrar las etiquetas html y body, suponiendo que el navegador lo manejará con gracia. No muy limpio codificación en mi humilde opinión.
Sxilderik
0

Lo que buscas se llama "captura de pantalla de página completa". Como no ha dicho qué navegador está utilizando, es difícil recomendar una aplicación, pero aquí hay algunos ejemplos:

http://www.designer-daily.com/5-ways-to-capture-full-webpage-screenshots-15291 http://www.techsmith.com/snagit.html

Craig Watson
fuente
Solo quiero una parte de la página completa. Uno de los programas mencionados en la página a la que me dirigió es Fireshot, que ya tengo. No hay forma de tomar una captura de pantalla solo de la parte desplazable incrustada.
Rolo
¿Podría capturar la vista completa y luego recortar la porción que realmente necesita?
Craig Watson
No parece que estés entendiendo el problema. Para la porción que necesito, solo una parte es visible. Tengo que desplazarme para ver el resto (y no me refiero a desplazar toda la página web, sino más bien una parte incrustada).
Rolo