Questão Como posso tirar screenshots do navegador em uma resolução maior do que o meu navegador suporta?


Eu preciso fazer uma captura de tela de um site como ele apareceria em um monitor de alta resolução ... digamos 4000x3000 pixels. A tela do meu laptop tem uma resolução nativa de 1400x768. Basicamente, eu preciso simular uma resolução de monitor muito maior do que o meu monitor e placa de vídeo realmente suportam. Eu quero que a imagem do site fique muito parecida com o que acontece quando você pressiona CTRL MINUS (zoom out) no Firefox repetidamente, mas sem perda de pixels devido ao dimensionamento. Como posso fazer isso? Existe alguma maneira de usar o software de máquina virtual para simular um monitor de super alta resolução? Se não, existe alguma maneira de abrir uma janela do navegador maior que a tela e capturar seu conteúdo como um PNG de alguma forma? Qualquer outra coisa que possa funcionar?


95


origem


Você pode tentar mudar a configuração de dpi do seu sistema operacional. Eu acredito no windows 8 que requer a alteração de um valor de registro. Enquanto isso lhe dá uma área de trabalho gigantesca, as fontes também escalam, então você tem que esticar os olhos mais para ler o texto. - jiggunjer


Respostas:


Você pode fazer isso com o Firefox e 2 extensões: Desenvolvedor Web e Tiro de fogo.

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

Adicione um novo tamanho, 4000 x 3000. marque "Redimensionar a janela de visualização" se quiser que apenas o conteúdo da página seja 4000x3000. Se você não verificar, a janela completa do Firefox (com barras de ferramentas, menu, ...) será definida para essa dimensão.

alt text

Uma vez no tamanho correto, vá para Ferramentas - FireShot - Capture Entire Page 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.

alt text


103



@snark - Bem, isso quase trabalhado. Mas parece que a extensão Web Developer não me deixa fazer a viewport maior que a minha tela ...? - Joshua Carmody
@Joshua: funciona bem para mim. Eu testei antes de postar minha resposta. Fiz um novo teste, mas não consegui encontrar onde hospedar uma imagem tão grande - Snark
Atualização: O problema "não consigo criar uma janela maior do que a tela" parece ser uma limitação imposta pelo próprio sistema operacional Windows. - Joshua Carmody
@snark - Você se importa se eu perguntar qual sistema operacional você está rodando? - Joshua Carmody
@snark - Ah. Talvez seja uma coisa do Windows XP (é com isso que estou preso aqui). Em qualquer caso, posso contornar 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 estou bem. Obrigado por apontar o FireShot. Isso me torna a vida muito mais fácil. Eu estava rolando e tirando screenshots do que compondo-os manualmente antes. Foi uma grande dor. - Joshua Carmody


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

Ou acertar CtrlMudança  M ou selecione Vista de design responsivo de Ferramentas de desenvolvimento ícone no menu de listras.

Isso trará essa visão, que permitirá escolher entre um conjunto de presets e inserir qualquer resolução desejada e salve diretamente uma captura de tela no formato PNG em disco com um clique:

enter image description here


18



O botão de captura de tela pode não funcionar corretamente quando você está simulando imagens de alta resolução ao aumentar o zoom. Nesse caso, abra a barra de ferramentas do desenvolvedor Shift + F2 e cole screenshot --clipboard --fullpage no "console". Isso é diferente do console JS comum. - blade
Isso também funciona com o modo de teste do dispositivo do console do desenvolvedor do chrome. A opção de captura de tela está no menu suspenso no canto superior direito. - Tully
Infelizmente, isso parece não funcionar no Chrome. Acabei de tentar fazer uma captura de tela de visualização completa no Chrome de um Microsoft Flow (já que o Flow não é exibido corretamente no Firefox, embora o método de captura de tela de visualização completa do Firefox funcione) e ele só tirou uma captura de tela do espaço visualizado atualmente ... em outras palavras, não houve diferença entre as opções de "capturar captura de tela" e "capturar captura de tela inteira" do Chrome ... Que chatice. - TylerH


No Mac, Paparazzi pode ajudar, seja usando sua GUI ou usando uma sintaxe de URL como:

paparazzi: (largura = 4000, altura = 3000, maxheight = 3000)Como posso tirar screenshots do navegador em uma resolução maior do que o meu navegador suporta?

enter image description here

A sintaxe da URL pode ser facilmente se transformou em um bookmarklet. Paparazzi usa o mecanismo de renderização do WebKit.


8





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

Parece Captura de tela fará a mesma coisa.


5





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

Ferramentas de abertura ... Desenvolvedor da Web ... Barra de ferramentas do desenvolvedor

Redimensione o visor com este comando:

resize to 5000 5000

Captura de tela com este comando:

screenshot output.png

5





Bem, com um Linux (ou uma configuração do X Window System de qualquer tipo) você pode configurar um desktop virtual maior que o seu monitor. Você rola nele, mas eu acho que você poderia maximizar seu navegador e captura de tela.

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


4





Eu acho que usando serviços online como thumbalizr mais fácil do que instalar plugins de navegador, se você não precisa fazer isso com frequência.


3