Como tirar uma captura de tela que inclui um elemento de rolagem dentro de uma página da web no Firefox?

Question

Eu preciso fazer uma captura de tela de uma página inteira. O truque é que eu preciso da captura de tela para incluir todo o conteúdo de um único elemento que não cabe na tela.

É uma tabela de coluna única que possui uma barra de rolagem devido à sua altura. Não é um IFRAME (que seria simples de carregar em sua própria aba).

A coluna contém texto formatado e algumas pequenas imagens.

Para longas páginas da web que rolam, é trivial executar essa tarefa. Mas como isso pode ser feito quando contém um elemento individual dentro da página que rola?

Para ser claro, preciso capturar a página inteira, não apenas o elemento em si.

Eu gostaria de fazer isso usando o Firefox no Windows.

    

Answer 1

Minha sugestão é usar o recurso incorporado do Firefox que permite tirar screenshots do elemento DOM único.

Basta abrir as ferramentas do desenvolvedor → Localizar o elemento → Clicar com o botão direito e fazer o screenshot

Nãofuncionouemumdosmeussitesinternos,entãonãopossodizerquefuncionaráparatodos.

AtualizarapósoEditdoOP:

SevocêpretendegravarapáginainteiracomtodooconteúdodoelementoDOM,comomostradoabaixo,convémeditaraalturadoelementoDOM,mas...

ElevaiempurrarummontedeelementosDOMparaforadajaneladevisualizaçãoecapturadetelaouAFAIKqualqueroutraferramentanãoirácapturá-lo,oquesuperaoseupropósito,euacho.

Leiaabaixode link

A screenshot, screen capture, screen cap, cap, screen dump, or screengrab is an image taken by a person to record the visible items displayed on the monitor, television, or other visual output device in use.

Se eu realmente tivesse que fazer do seu jeito, eu criaria um GIF ou pegaria duas capturas de tela uma página inteira e outra somente do elemento DOM para mesclar em uma.

    

Answer 2

Você pode usar o comando screenshot da barra de ferramentas do desenvolvedor:

1. Pressione Shift + F2 para abrir a barra de ferramentas ou selecione-a no menu Ferramentas do Desenvolvedor da Web.

2. Na barra de ferramentas, digite o comando screenshot --fullpage fullpage.png .

Para capturar um único elemento, você pode usar seu seletor css com o sinalizador --selector, por exemplo.

screenshot --selector #hot-network-questions

você verá a imagem abaixo

    

Answer 3

Use o Modo de design responsivo do Firefox, defina a largura para algo normal e a altura tal que é o suficiente para abranger toda a página, clique no botão de captura de tela (o ícone da câmera).

    

Answer 4

Existe um Software chamado Snagit que pode resolver o seu problema. Este software pode tirar a tela em diferentes tipos, como uma janela de rolagem e também pode gravar vídeo.

É um aplicativo pago, mas também tem um teste disponível.

    

Answer 5

Eu uso Screenpresso . Ele permite que você faça uma captura de tela de rolagem. Basicamente, você pega uma captura de tela, rola para baixo e pega outra e assim por diante, então o Screenpresso as une. O Screenpresso também é gratuito.

FYI, as teclas de atalho para a rolagem da tela são WindowsKey + Shift + PrintScreen. Você precisa então clicar na janela que deseja rolar. Quando você chegar à próxima parte da tela, clique com o botão direito, role para baixo, clique com o botão direito e assim por diante. Quando terminar, clique com o botão esquerdo e eles serão costurados juntos. Certifique-se de obter alguma sobreposição em cada captura de tela para que o processo de costura funcione melhor.

    

Answer 6

Existe uma extensão chamada Nimbus Screen Capture , que é perfeitamente adequado para esta tarefa.

Você tem a opção de capturar:

• a parte visível da página (útil para não incluir os elementos do navegador em oposição a alt + Imprimir Scrn )
• um fragmento da página (por meio do qual você pode passar o mouse sobre regiões na tela para encontrar o fragmento desejado - essas regiões correspondem aos elementos HTML subjacentes)
• área selecionada (você clica e arrasta manualmente onde deseja a captura de tela, suporta a rolagem enquanto arrasta)
• a página inteira

    

Answer 7

Opções para ajustar tudo em uma única página:

• Use <Ctrl>- para ajustar tudo em uma página
• Gire sua tela para o modo retrato
• Use uma segunda tela no modo retrato e localize-a abaixo da primeira
• Combine todos os itens acima

Outra opção é fazer uma captura de tela da parte superior do que você deseja capturar. Role para baixo, tire a próxima captura de tela. Repita isso até capturar tudo.
Opcionalmente: combine as capturas de tela em uma imagem grande usando um editor de imagens (por exemplo, gimp).

    

Answer 8

Para fazer capturas de tela, você pode adicionar uma extensão como captura de tela fácil. Então será muito mais fácil para você tirar fotos da tela.