Como posso capturar imagens de tela do navegador em uma resolução mais alta do que o meu navegador suporta?

97

Preciso tirar uma captura de tela de um site, pois ele apareceria em um monitor de resolução muito alta ... digamos 4000x3000 pixels. A tela do meu laptop tem uma resolução nativa de 1400x768. Basicamente, preciso simular uma resolução de monitor muito mais alta do que realmente suporta o meu monitor e placa de vídeo. Eu quero que a captura de tela do site tenha a mesma aparência quando você pressiona CTRL MINUS (diminuir o zoom) repetidamente no Firefox, mas sem perda de pixels devido ao dimensionamento. Como posso fazer isso? Existe alguma maneira de usar o software da máquina virtual para simular uma exibição de alta resolução? Caso contrário, existe alguma maneira de abrir uma janela do navegador maior que a tela e capturar seu conteúdo como PNG de alguma forma? Mais alguma coisa que possa funcionar?

browser virtual-machine resolution screenshot screen-capture Joshua Carmody
fonte
Você pode tentar mudar a configuração de dpi do seu sistema operacional. Acredito no Windows 8 que exige a alteração de um valor do Registro. Embora isso ofereça uma área de trabalho gigante, é claro que as fontes também são dimensionadas para que você tenha que se esforçar mais para ler o texto.
Jiggunjer

Respostas:

104

Você pode fazer isso com o Firefox e 2 extensões: Desenvolvedor da Web e FireShot .

Depois que as duas extensões estiverem instaladas, vá para Ferramentas - Desenvolvedor da Web - Redimensionar - Editar Redimensionar dimensões ....

Adicione um novo tamanho, 4000 x 3000. marque "Redimensionar a janela de exibição" se desejar que apenas o conteúdo da página seja 4000x3000. Caso contrário, a janela completa do Firefox (com barras de ferramentas, menu, ...) será definida para esta dimensão.

texto alternativo

Uma vez no tamanho correto, vá para Ferramentas - FireShot - Capturar página inteira e .... Selecione uma ação, como Salvar, por exemplo. Ele salvará o conteúdo da página que foi definido pelo Web Developer no tamanho desejado.

texto alternativo

Snark
fonte
@snark - Bem, isso quase funcionou. Mas parece que a extensão Web Developer não me deixa aumentar a janela de exibição que minha tela ...?
21710 Joshua Carmody
@ Josué: funciona bem para mim. Eu testei antes de postar minha resposta. Eu fiz um novo teste, mas não conseguiu encontrar onde hospedar imagem grande como um
Snark
1
Atualização: o problema de não conseguir fazer uma janela maior que a tela parece ser uma limitação imposta pelo próprio sistema operacional Windows.
21810 Joshua Carmody
@snark - Você se importa se eu perguntar qual sistema operacional você está executando?
Joshua Carmody
2
@snark - Ah. Talvez seja uma coisa do Windows XP (é com isso que estou preso aqui). Em qualquer caso, posso solucionar isso usando o FireBug para inserir um DIV com style = "width: 4000px; height: 3000px;" no código HTML e, em seguida, usando o FireShot, então ainda sou bom. Obrigado por apontar o FireShot. Isso me torna a vida muito mais fácil. Eu estava rolando e tirando screenshots do que as compondo manualmente antes. Foi uma grande dor.
21710 Joshua Carmody
19

Enquanto isso (por pelo menos um ano ou dois - desde a versão 15, se não me engano), o Firefox suporta isso diretamente por meio das ferramentas de desenvolvedor integradas.

Quer bater CtrlShift Mou selecione Responsive vista de estrutura do Developer Tools ícone no menu stripe.

Isso exibirá essa visualização, que permitirá escolher entre um conjunto de predefinições, além de inserir qualquer resolução desejada e salvar diretamente uma captura de tela no formato PNG em disco com um clique:

insira a descrição da imagem aqui

Damon
fonte
1
O botão de captura de tela pode não funcionar corretamente quando você simula imagens hi-dpi ao aumentar o zoom. Nesse caso, abra a barra de ferramentas do desenvolvedor Shift+ F2e cole screenshot --clipboard --fullpageno "console". Isso é diferente do console JS comum.
blade
Isso também funciona com o modo de teste de dispositivo do console do desenvolvedor chrome. A opção de captura de tela está no menu suspenso no canto superior direito.
Tully
Infelizmente, isso não parece funcionar no Chrome; Eu apenas tentei fazer uma captura de tela de visualização completa no Chrome de um Microsoft Flow (já que o Flow não será exibido corretamente no Firefox, mesmo que o método de captura de tela de visualização completa do Firefox funcione) e apenas uma captura de tela do espaço visualizado no momento ... em outras palavras, não havia diferença entre as opções "captura de tela" e "captura de tela em tamanho real" do Chrome ... chatice.
TylerH
6

Eu uso um complemento do FireFox chamado Abduction para criar uma imagem .png de uma página da web na sua totalidade. Infelizmente esse complemento ainda não foi atualizado para ser compatível com o FireFox 3.6 ainda.

Parece que o ScreenGrab fará a mesma coisa.

Zooks64
fonte
5

O Firefox 16 em diante agora contém a capacidade de controlar o tamanho da janela de exibição com o console do desenvolvedor:

Abra Ferramentas ... Desenvolvedor Web ... Barra de ferramentas do desenvolvedor

Redimensione a viewport com este comando:

resize to 5000 5000

Captura de tela com este comando:

screenshot output.png
Wayne Piekarski
fonte
4

Bem, com uma configuração Linux (ou X Window System de qualquer sabor), você pode definir uma área de trabalho virtual maior que o seu monitor. Você rola nele, mas acho que você poderia maximizar seu navegador e capturar a tela.

Não sei se existe uma maneira de fazer isso no Windows ou no OS X.

Ronald Pottol
fonte
3

Acho mais fácil usar serviços online como o thumbalizr do que instalar plug-ins de navegador, se você não precisar fazer isso com frequência.

svick
fonte
1

No Chrome, existem extensões severais, como:

Há outra captura de tela da página da Web, mas não tenho reputação suficiente para publicar mais de dois links

titusfx
fonte