¿Cómo puedo tomar capturas de pantalla del navegador a una resolución más alta que la que admite mi navegador?


97

Necesito tomar una captura de pantalla de un sitio web, ya que aparecería en un monitor de muy alta resolución ... digamos 4000x3000 píxeles. La pantalla de mi computadora portátil tiene una resolución nativa de 1400x768. Básicamente, necesito simular tener una resolución de monitor mucho más alta de lo que mi monitor y tarjeta de video realmente admiten. Quiero que la captura de pantalla del sitio se vea más o menos como se ve cuando presionas CTRL MINUS (alejar) en Firefox repetidamente, pero sin ninguna pérdida de píxeles debido a la escala. ¿Cómo puedo hacer esto? ¿Hay alguna forma de usar el software de máquina virtual para simular una pantalla de súper alta resolución? Si no, ¿hay alguna manera de abrir una ventana del navegador más grande que la pantalla y luego capturar su contenido como PNG de alguna manera? ¿Algo más que pueda funcionar?


Puede intentar cambiar la configuración de dpi de su sistema operativo. Creo que en Windows 8 requiere cambiar un valor de registro. Si bien esto le brinda un escritorio gigante, las fuentes también se escalan, por lo que debe esforzarse más para leer el texto.
jiggunjer

Respuestas:


104

Puedes hacerlo con Firefox y 2 extensiones: Desarrollador web y FireShot .

Una vez que ambas extensiones estén instaladas, vaya a Herramientas - Desarrollador web - Cambiar tamaño - Editar Cambiar tamaño Dimensiones ....

Agregue un nuevo tamaño, 4000 x 3000. marque "Cambiar el tamaño de la ventana gráfica" si desea que solo el contenido de la página sea 4000x3000. Si no lo marca, la ventana completa de Firefox (con barras de herramientas, menú, ...) se establecerá en esta dimensión.

texto alternativo

Una vez en el tamaño correcto, vaya a Herramientas - FireShot - Capture toda la página y .... Seleccione una acción, como Guardar, por ejemplo. Guardará el contenido de la página que Web Developer ha establecido en el tamaño deseado.

texto alternativo


@snark - Bueno, eso casi funcionó. Pero parece que la extensión Web Developer no me permite hacer que la ventana de visualización sea más grande que mi pantalla ...
Joshua Carmody

@ Joshua: funciona bien para mí. Probé antes de publicar mi respuesta. Hice una nueva prueba pero no pude encontrar dónde alojar una imagen tan grande
Snark el

1
Actualización: el problema no puede hacer que una ventana sea más grande que la pantalla parece ser una limitación impuesta por el propio sistema operativo Windows.
Joshua Carmody

@snark - ¿Te importa si te pregunto qué sistema operativo estás ejecutando?
Joshua Carmody

2
@snark - Ah. Tal vez sea una cosa de Windows XP (eso es con lo que estoy atrapado aquí). En cualquier caso, puedo solucionarlo usando FireBug para insertar un DIV con style = "width: 4000px; height: 3000px;" en el código HTML, y luego usando FireShot, así que todavía estoy bien. Gracias por señalar FireShot. Eso me hace la vida mucho más fácil. Había estado desplazándome y tomando capturas de pantalla que componiéndolas manualmente antes. Fue un DOLOR MAYOR.
Joshua Carmody

19

Mientras tanto (durante al menos un año o dos, desde la versión 15, si no me equivoco), Firefox lo admite directamente a través de las herramientas integradas para desarrolladores.

Pulse CtrlShift Mo seleccione Vista de diseño receptivo en el icono de Herramientas para desarrolladores en el menú de franjas.

Aparecerá esta vista, que le permitirá elegir entre un conjunto de ajustes preestablecidos, así como ingresar cualquier resolución deseada y guardar directamente una captura de pantalla en formato PNG en el disco con un solo clic:

ingrese la descripción de la imagen aquí


1
Es posible que el botón de captura de pantalla no funcione correctamente al simular imágenes de alta resolución haciendo zoom. En ese caso, abra la barra de herramientas del desarrollador Shift+ F2y péguela screenshot --clipboard --fullpageen la "consola". Esto es diferente a la consola JS normal.
cuchilla

Esto también funciona con el modo de prueba del dispositivo de la consola de desarrollador de Chrome. La opción de captura de pantalla está en el menú desplegable en la esquina superior derecha.
Tully

Lamentablemente, esto no parece funcionar en Chrome; Intenté tomar una captura de pantalla completa en Chrome de un Microsoft Flow (ya que Flow no se mostrará correctamente en Firefox, aunque el método de captura de pantalla completa de Firefox funciona) y solo tomó una captura de pantalla del espacio visualizado actualmente ... en otras palabras, no había diferencia entre las opciones de "capturar captura de pantalla" de Chrome y "capturar captura de pantalla completa" ... bummer.
TylerH


6

Utilizo un complemento de FireFox llamado Abduction para crear una imagen .png de una página web en su totalidad. Lamentablemente, ese complemento aún no se ha actualizado para ser compatible con FireFox 3.6.

Parece que ScreenGrab hará lo mismo.


5

Firefox 16 en adelante ahora contiene la capacidad de controlar el tamaño de la ventana gráfica con la consola del desarrollador:

Abrir Herramientas ... Desarrollador web ... Barra de herramientas para desarrolladores

Cambiar el tamaño de la ventana gráfica con este comando:

resize to 5000 5000

Captura de pantalla con este comando:

screenshot output.png

4

Bueno, con una configuración de Linux (o X Window System de cualquier tipo) puede configurar un escritorio virtual que sea más grande que su monitor. Te desplazas por él, pero creo que podrías maximizar tu navegador y capturarlo.

No sé si hay una manera de hacerlo en Windows u OS X.


3

Considero que usar servicios en línea como thumbalizr es más fácil que instalar complementos del navegador, si no necesita hacerlo con frecuencia.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.