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

70

Preciso tirar 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 guia).

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

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

Para ser claro, preciso capturar a página inteira, não apenas o próprio elemento.

Eu gostaria de fazer isso usando o Firefox no Windows.

windows  firefox  scrolling  screenshot  capture 
— RockPaperLizard
fonte
2
Você já pensou em salvar a página como PDF? O problema desse método é que alguns sites têm uma "visualização de impressão", que é o que o PDF conterá, mas em alguns casos essa técnica pode funcionar.
— JakeGould
@JakeGould Obrigado Jake. Isso funcionaria para rolar e elemento dentro de uma página?
— RockPaperLizard
Welp, perdeu a parte sobre o elemento de rolagem. Isso é idiossincrático demais para eu comentar, então tudo o que posso dizer é que não posso ter certeza agora que o método de impressão em PDF funcionará. Boa sorte com outras idéias apresentadas aqui.
— JakeGould
— a CVn
Se bem entendi, o elemento de rolagem em questão provavelmente está sendo forçado a menos do que sua altura total. Definir o atributo de estilo de altura como automático nesse elemento pode ajudar.
— tehwalris

Respostas:

86

Minha sugestão é usar o recurso interno do Firefox que permite tirar capturas de tela de um único elemento DOM.

Basta abrir as ferramentas do desenvolvedor → Encontre o elemento → Clique com o botão direito e faça o screenshot

insira a descrição da imagem aqui

Não funcionou em um site interno, portanto não posso dizer que funcionará para todos.

Atualizar após a edição do OP:

Se você deseja gravar a página inteira junto com todo o conteúdo do elemento DOM, como mostrado abaixo, edite ao vivo a altura do elemento DOM, mas ...

insira a descrição da imagem aqui

Isso empurrará muitos elementos DOM para fora da janela de exibição e captura de tela ou o AFAIK qualquer outra ferramenta não irá capturá-la, o que supera o seu objetivo, eu acho.

Leia abaixo em https://en.wikipedia.org/wiki/Screenshot

Uma captura de tela, captura de tela, tampa de tela, tampa, despejo de tela ou captura de tela é uma imagem tirada por uma pessoa para gravar os itens visíveis exibidos no monitor, televisão ou outro dispositivo de saída visual em uso.

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

— trocadilho
fonte
Muito obrigado pela sua resposta (e ótima imagem!), Mas infelizmente isso não responde à pergunta. Eu preciso tirar uma captura de tela da página inteira, incluindo o elemento, não apenas o elemento em si.
— RockPaperLizard
5
@RockPaperLizard, na verdade, a resposta do trocadilho responde à sua pergunta ... ele simplesmente não a aplicou ao seu caso de uso. Você pode seguir a resposta dele, mas selecione o <body>elemento e ele fornecerá a captura de tela desejada.
— Digital Chris
2
Se você editar a altura do elemento DOM para que não haja barras de rolagem internas e use o FireShot para capturar a página inteira, ele deverá funcionar.
Consegui obter uma captura de tela como essa, mas não mais. Ele ainda produz o som do obturador da câmera, apenas não coloca nada na área de transferência. O mesmo vale para o comando na barra de ferramentas do desenvolvedor, nenhum arquivo é criado.
— MrFox
@MrFox Um arquivo png é criado na pasta Downloads.
— AxiomaticNexus
24

Você pode usar o comando de captura de tela na barra de ferramentas do desenvolvedor:

  1. Pressione Shift+ F2para 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ê receberá a imagem abaixo

insira a descrição da imagem aqui

— topher
fonte
4
@RockPaperLizard Encontrei outro post com a mesma resposta e o OP foi editado por você.
— pun
@pun Obrigado. Mas preciso fazer uma captura de tela da página inteira com o elemento expandido, não apenas o próprio elemento.
— RockPaperLizard
Consegui obter uma captura de tela como essa, mas não mais. Ainda produz o som do obturador da câmera, mas não o arquivo. O mesmo vale para clicar com o botão direito do mouse no elemento no modo de desenvolvedor e copiá-lo dessa maneira. Nenhuma imagem é enviada para a área de transferência.
— MrFox
8

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

— Ouroborus
fonte
4

Existe um software chamado Snagit que pode resolver seu problema. Este software pode capturar 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.

— Gurumurthy.G
fonte
se você encontrar isso como resposta, marque-o e publique-o no comentário O que isso significa?
— AL
3
— MonkeyZeus
Eu uso o SnagIt há anos. É um software muito útil.
— Roy Tinker
2

Eu uso o Screenpresso . Permite tirar uma captura de tela de rolagem. Basicamente, você faz uma captura de tela, rola a tela para baixo, tira outra e assim por diante, e então o Screenpresso as une. Screenpresso também é gratuito.

Para sua informação, as teclas de atalho para a rolagem da captura de tela são WindowsKey + Shift + PrintScreen. Você precisa clicar na janela que deseja rolar. Quando você chegar à próxima parte da captura de 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 unidos. Verifique se há sobreposição em cada captura de tela para que o processo de costura funcione melhor.

— garethb
fonte
1

Existe uma extensão chamada Nimbus Screen Capture que é perfeitamente adequada 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 vez de alt+ Print Scrn)
  • um fragmento da página (onde você pode passar o mouse sobre as regiões da 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 rolagem enquanto arrasta)
  • a página inteira

nimbus

— Keith Hall
fonte
Obrigado pela sua resposta, agradeço. Infelizmente, não parece que o Nimbus Screen Capture possa capturar todo o conteúdo de um elemento de rolagem em uma página. Se eu estiver enganado, você poderia fornecer mais detalhes sobre como fazer isso com essa ferramenta?
— RockPaperLizard
@RockPaperLizard você está certo, não parece apoiar isso - pensei que o modo de fragmento cobriria elementos de rolagem ou que o modo de área selecionado funcionaria, mas, embora a janela possa ser rolada nesse modo, parece que os elementos de rolagem não podem.
— Keith Salão
Obrigado por confirmar que não estava vendo. Talvez eles adicionem essa funcionalidade a uma versão futura.
— RockPaperLizard
0

Opções para ajustar tudo em uma 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 todas as opções acima

Outra opção é tirar uma captura de tela da parte superior do que você deseja capturar. Role para baixo, faça 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).

— NZD
fonte
11
Até chegar ao item 4, pensei que você estava apenas sugerindo combinar todos os itens! Eu estava imaginando ter 20 telas e empilhá-las uma em cima da outra ... LOL. Cheguei à quarta posição e aprendi que você queria que os itens fossem usados ​​individualmente ou combinados.
— RockPaperLizard
Mas se você diminuir o zoom na página, não há como redimensioná-la sem distorção.
— NiCk Newman
0

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

— user606374
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.