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 único 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 sencillo 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 claros, necesito capturar toda la página, no sólo el elemento en sí.
Me gustaría lograr esto usando Firefox en Windows.
Respuesta1
Mi sugerencia es utilizar elFunción integrada de Firefoxque le permite tomar capturas de pantalla de un solo elemento DOM.
Simplemente abra las herramientas de desarrollador → Busque el elemento → Haga clic derecho y tome una captura de pantalla
No funcionó en uno de mis sitios internos, por lo 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...
Va a sacar muchos elementos DOM de la ventana gráfica y la captura de pantalla o, AFAIK, cualquier otra herramienta no los capturará, lo que creo que supera su propósito.
Lea a continuación desdehttps://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 registrar los elementos visibles que se muestran en el monitor, televisor u otro dispositivo de salida visual en uso.
Si realmente tuviera que hacerlo a tu manera, crearía un GIF o tomaría dos capturas de pantalla, una de la página completa y otra solo del elemento DOM para fusionarlas en una.
Respuesta2
2021 Editar
La barra de herramientas fue eliminada de FF. Pero aún puede acceder a los comandos escribiéndolos en la consola con el prefijo :. Entonces, para capturas de pantalla, use
:screenshot --fullpage fullpage.png
o
:screenshot --selector #hot-network-questions fullpage.png
Antigua respuesta
Puede utilizar el comando de captura de pantalla de la barra de herramientas del desarrollador:
Presione Shift+ F2para abrir la barra de herramientas o selecciónela en el menú Herramientas de desarrollo web.
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
Respuesta3
Usando FirefoxModo de diseño responsivo, establezca el ancho en algo normal y la altura tal que sea suficiente para abarcar toda la página. Luego haga clic en el botón de captura de pantalla (el ícono de la cámara).
Respuesta4
yo sueloPrensa de pantalla. Le permite tomar una captura de pantalla con desplazamiento. Básicamente, tomas una captura de pantalla, te desplazas hacia abajo y tomas otra, y así sucesivamente, luego Screenpresso las une. Screenpresso también es gratuito.
Para su información, las teclas de acceso directo para desplazarse por la captura de pantalla son Tecla Windows+Mayús+ImprimirPantalla. Luego debe hacer clic en la ventana que desea desplazar. Cuando llegue a la siguiente parte de 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 algo en cada captura de pantalla para que el proceso de unión funcione mejor.