¿Cómo tomar una captura de pantalla que incluya un elemento de desplazamiento dentro de una página web en Firefox?

70

Necesito tomar una captura de pantalla de una página web completa. El truco es que necesito que la captura de pantalla incluya todo el contenido de un solo elemento que no cabe en la pantalla.

Es una tabla de una sola columna que tiene una barra de desplazamiento debido a su altura. No es un IFRAME (que sería fácil de cargar en su propia pestaña).

La columna contiene texto formateado y algunas imágenes pequeñas.

Para páginas web largas que se desplazan, es trivial realizar esta tarea. Pero, ¿cómo se puede lograr cuando contiene un elemento individual dentro de la página que se desplaza?

Para ser claro, necesito capturar toda la página, no solo el elemento en sí.

Me gustaría lograr esto usando Firefox en Windows.

windows firefox scrolling screenshot capture RockPaperLizard
fuente
2
¿Alguna vez consideró guardar la página como PDF? El problema con este método es que algunos sitios web tienen una "vista de impresión" que es lo que contendrá el PDF, pero en algunos casos esta técnica puede funcionar.
JakeGould
@JakeGould Gracias Jake. ¿Funcionaría desplazarse y desplazarse dentro de una página?
RockPaperLizard
Welp, se perdió la parte sobre el elemento de desplazamiento. Es demasiado idiosincrásico para mí comentarlo, así que todo lo que puedo decir es que ahora no puedo estar seguro de que el método de impresión PDF funcionará. Mucha suerte con otras ideas presentadas aquí.
JakeGould
Posiblemente útil: complemento de Firefox para guardar la página renderizada completa como imagen en las Recomendaciones de software .
un CVn
Si entiendo correctamente, el elemento de desplazamiento en cuestión probablemente esté siendo forzado a menos de su altura total. Puede ser útil establecer el atributo de estilo de altura en automático en ese elemento.
tehwalris

Respuestas:

86

Mi sugerencia es utilizar la función integrada de Firefox que le permite tomar capturas de pantalla de un solo elemento DOM.

Solo abre las herramientas del desarrollador → Encuentra el elemento → Haz clic derecho y toma una captura de pantalla

ingrese la descripción de la imagen aquí

No funcionó en uno de mi sitio interno, así que no puedo decir que funcionará para todos.

Actualización después de la edición de OP:

Si tiene la intención de grabar la página completa junto con todo el contenido del elemento DOM como se muestra a continuación, debe editar en vivo la altura del elemento DOM pero ...

ingrese la descripción de la imagen aquí

Va a empujar muchos elementos DOM fuera de la ventana gráfica y la captura de pantalla o AFAIK cualquier otra herramienta no lo capturará, lo que supera su propósito, creo.

Lea a continuación de https://en.wikipedia.org/wiki/Screenshot

Una captura de pantalla, captura de pantalla, tapa de pantalla, tapa, volcado de pantalla o captura de pantalla es una imagen tomada por una persona para grabar los elementos visibles que se muestran en el monitor, televisor u otro dispositivo de salida visual en uso.

Si realmente tuviera que hacerlo a su manera, crearía un GIF o tomaría dos capturas de pantalla una página completa y otra solo del elemento DOM para fusionarlo en uno.

retruécano
fuente
Muchas gracias por su respuesta (¡y excelente imagen!), Pero desafortunadamente esto no responde la pregunta. Necesito tomar una captura de pantalla de toda la página, incluido el elemento, no solo del elemento en sí.
RockPaperLizard
55
@RockPaperLizard en realidad la respuesta de @ pun responde la pregunta ... simplemente no la aplicó a su caso de uso. Puede seguir su respuesta pero seleccione el <body>elemento y le dará la captura de pantalla deseada.
Digital Chris
2
Si edita la altura del elemento DOM para que no haya barras de desplazamiento internas, use FireShot para capturar toda la página, debería funcionar.
Pude obtener una captura de pantalla como esta, pero no más. Todavía produce el sonido del obturador de la cámara, simplemente no pone nada en el portapapeles. Lo mismo ocurre con el comando en la barra de herramientas del desarrollador, no se crea ningún archivo.
MrFox
@MrFox Se crea un archivo png en la carpeta Descargas.
AxiomaticNexus
24

Puede usar el comando de captura de pantalla de la Barra de herramientas del desarrollador:

  1. Presione Shift+ F2para abrir la barra de herramientas o selecciónela en el menú Herramientas para desarrolladores web.

  2. En la barra de herramientas, escriba el comando screenshot --fullpage fullpage.png.

Para capturar un solo elemento, puede usar su selector css con el indicador --selector, por ejemplo 

screenshot --selector #hot-network-questions

te conseguirá la imagen de abajo

ingrese la descripción de la imagen aquí

topher
fuente
44
@RockPaperLizard Encontré otra publicación con la misma respuesta y OP fue editado por usted.
juego de palabras
@pun Gracias. Pero necesito tomar una captura de pantalla de toda la página con el elemento expandido, no solo el elemento en sí.
RockPaperLizard
Pude obtener una captura de pantalla como esta, pero no más. Todavía produce el sonido del obturador de la cámara, pero no el archivo. Lo mismo ocurre con hacer clic derecho en el elemento en modo desarrollador y copiarlo de esa manera. No se envía ninguna imagen al portapapeles.
MrFox
8

Use el Modo de diseño receptivo de Firefox , establezca el ancho en algo normal y la altura de modo que sea suficiente para abarcar toda la página, haga clic en el botón de captura de pantalla (el icono de la cámara).

Ouroborus
fuente
4

Hay un software llamado Snagit que puede resolver su problema. Este software puede tomar la captura de pantalla en diferentes tipos, como una ventana de desplazamiento y también puede grabar video.

Es una aplicación paga, pero también tiene una versión de prueba disponible.

Gurumurthy.G
fuente
si encuentra esto como respuesta márquelo y publíquelo en el comentario ¿Qué significa eso?
AL
3
@AL Este usuario no tiene suficiente representante para un comentario, por lo que proporcionó una respuesta con la esperanza de que un moderador lo convierta en un comentario.
MonkeyZeus
He usado SnagIt por años. Es una pieza de software muy útil.
Roy Tinker
2

Yo uso Screenpresso . Le permite tomar una captura de pantalla desplazable. Básicamente, toma una captura de pantalla, se desplaza hacia abajo y toma otra y así sucesivamente, luego Screenpresso las une. Screenpresso también es gratis.

Para su información, las teclas de acceso directo para la captura de pantalla de desplazamiento es WindowsKey + Shift + PrintScreen. Luego debe hacer clic en la ventana que desea desplazar. Cuando llegue a la siguiente parte para la captura de pantalla, haga clic derecho, desplácese hacia abajo, haga clic derecho y así sucesivamente. Cuando haya terminado, haga clic izquierdo y se unirán. Asegúrese de superponer algunas capturas de pantalla para que el proceso de costura funcione mejor.

garethb
fuente
1

Hay una extensión llamada Nimbus Screen Capture que se adapta perfectamente a esta tarea.

Tienes la opción de capturar:

  • la parte visible de la página (útil para no incluir los elementos del navegador en lugar de alt+ Print Scrn)
  • un fragmento de la página (mediante el cual puede desplazarse sobre regiones en la pantalla para encontrar el fragmento que desea; estas regiones corresponden a sus elementos HTML subyacentes)
  • área seleccionada (hace clic y arrastra manualmente donde desea la captura de pantalla, admite el desplazamiento mientras arrastra)
  • toda la página

nimbo

Keith Hall
fuente
Gracias por tu respuesta, te lo agradezco. Desafortunadamente, no parece que Nimbus Screen Capture pueda capturar todo el contenido de un elemento de desplazamiento dentro de una página. Si me equivoco, ¿podría proporcionar más detalles sobre cómo lograr esto con esa herramienta?
RockPaperLizard
@RockPaperLizard tiene razón, no parece admitir esto: pensé que el modo de fragmento cubriría los elementos de desplazamiento o que el modo de área seleccionada funcionaría pero, aunque la ventana se puede desplazar en este modo, parece que los elementos de desplazamiento no pueden.
Keith Hall
Gracias por confirmar que no lo estaba viendo. Tal vez agregarán esa funcionalidad a una versión futura.
RockPaperLizard
0

Opciones para ajustar todo en una página:

  • Úselo <Ctrl>-para ajustar todo en una página
  • Gire su pantalla al modo vertical
  • Use una segunda pantalla en modo vertical y ubíquela debajo de la primera.
  • Combina todo lo anterior

Otra opción es tomar una captura de pantalla de la parte superior de lo que desea capturar. Desplácese hacia abajo, tome la siguiente captura de pantalla. Repita esto hasta que haya capturado todo.
Opcionalmente: combine las capturas de pantalla en una imagen grande usando un editor de imágenes (por ejemplo, gimp).

NZD
fuente
1
¡Hasta que llegué al artículo 4, pensé que solo sugerías combinar todos los artículos! Me imaginaba tener 20 pantallas y apilarlas una encima de la otra ... LOL. Luego llegué al # 4, y aprendí que te referías a los artículos que se usarán individualmente o combinados.
RockPaperLizard
Pero si aleja la página, no hay forma de reducirla sin distorsión.
NiCk Newman
0

Para tomar capturas de pantalla, puede agregar una extensión como captura de pantalla fácil. Entonces será mucho más fácil para ti tomar capturas de pantalla.

usuario606374
fuente