Preciso fazer uma captura de tela de uma página da web inteira. O truque é que preciso que a captura de tela inclua 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 uma aba própria).
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 elemento em si.
Eu gostaria de fazer isso usando o Firefox no Windows.
Responder1
Minha sugestão é usar oRecurso integrado do Firefoxque permite fazer 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 uma captura de tela
Não funcionou em um dos meus sites internos, então não posso dizer que funcionará para todos.
Atualização após edição do OP:
Se você pretende gravar a página inteira junto com todo o conteúdo do elemento DOM conforme mostrado abaixo, você deve editar ao vivo a altura do elemento DOMmas...
Ele vai empurrar muitos elementos DOM para fora da janela de visualização e da captura de tela ou AFAIK, qualquer outra ferramenta não irá capturá-los, o que vai além do seu propósito, eu acho.
Leia abaixo dehttps://en.wikipedia.org/wiki/Captura de tela
Uma captura de tela, captura de tela, limite de tela, limite, despejo de tela ou captura de tela é uma imagem tirada por uma pessoa para registrar 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, criaria um GIF ou tiraria duas capturas de tela, uma da página inteira e outra apenas do elemento DOM para mesclar em uma.
Responder2
Edição de 2021
A barra de ferramentas foi removida do FF. Mas você ainda pode acessar os comandos digitando-os no console com o prefixo :. Então, para capturas de tela, use
:screenshot --fullpage fullpage.png
ou
:screenshot --selector #hot-network-questions fullpage.png
Resposta antiga
Você pode usar o comando de captura de tela da barra de ferramentas do desenvolvedor:
Pressione Shift+ F2para abrir a barra de ferramentas ou selecione-a no menu Ferramentas para desenvolvedores da Web.
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
Responder3
Usando o FirefoxModo de design responsivo, defina a largura para algo normal e a altura para que seja suficiente para abranger a página inteira. Em seguida, clique no botão de captura de tela (o ícone da câmera).
Responder4
eu usoScreenpresso. Ele permite que você faça uma captura de tela de rolagem. Basicamente você tira uma captura de tela, rola para baixo e tira outra e assim por diante, então o Screenpresso os une. Screenpresso também é gratuito.
Para sua informação, as teclas de atalho para rolagem da captura de tela são WindowsKey + Shift + PrintScreen. Em seguida, 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 costurados. Certifique-se de obter alguma sobreposição em cada captura de tela para que o processo de costura funcione melhor.