Como fazer captura de tela a partir de uma renderização de design responsiva sem que ela seja dimensionada por zoom?

Question

Eu preciso de uma captura de tela do nosso aplicativo da web. Ele vai em um pôster impresso, então eu preciso disso em uma versão de alta DPI. Eu tenho um monitor de 96 DPI, portanto, uma imagem de tela padrão é pixelizada quando impressa. Minha solução para esse problema foi

• Calcule o número de pixels de que preciso para que a imagem possa ser impressa em 300 dpi no tamanho que eu preciso
• defina a ferramenta Design responsivo no Firefox para a mesma janela de exibição de tamanho, digamos X por Y pixels
• aplique zoom com Ctrl + + até que os elementos de design necessários preencham a visualização (essa parte é importante - a solução precisa funcionar quando o conteúdo é ampliado ou ampliado)
• use a ferramenta de captura de tela integrada para criar uma captura de tela.
• use o GIMP para alterar a resolução da imagem para 300 dpi sem alterar o número real de pixels

Para minha surpresa, a captura de tela não era de X por Y pixels, mas um tamanho menor, por exemplo, 0,67x por 0,67Y, então eu só consegui obter uma imagem de 200 dpi sem ampliá-la. O fator também variou. Depois de brincar, descobri que o tamanho da imagem é determinado pelo nível de zoom.

Usar um addon para fazer a captura de tela (Awesome Screenshot Plus) produziu exatamente o mesmo problema. O uso do Chrome gerou um problema diferente, pois o Chrome não renderiza a viewport completa e apenas parte da imagem é capturada. Que eu saiba, o IE não possui uma ferramenta para ampliar o tamanho da viewport além dos limites da tela física.

Você tem alguma sugestão (complemento do navegador, talvez um navegador diferente?) para obter uma captura de tela? Eu preciso de um navegador para renderizar a página e não algo como o PageLayouts, porque o JavaScript no aplicativo está um pouco envolvido, e porque eu tenho que ajustar um pouco o HTML e o CSS na hora.

Estou trabalhando em um PC com Windows e meu departamento não tem orçamento para investir em uma ferramenta dedicada paga para essa tarefa.

    

Answer 1

O que funcionou para mim foi no Firefox. Eu abri o console do desenvolvedor e, no canto superior direito, cliquei nas opções da caixa de ferramentas (parece uma pequena engrenagem).

Em"Botões da caixa de ferramentas disponíveis", verifiquei "Fazer uma captura de tela inteira". Isso fez com que um pequeno botão da câmera aparecesse ao lado do botão de opções da caixa de ferramentas.

Em seguida, no modo de design responsivo, defini minha resolução e, em seguida, tirei a tela com o botão de tela inteira. Eu saí como a resolução correta que eu precisava.

Nota: Sei que o recurso de design responsivo tem um botão de captura de tela, mas, para mim, quando eu pegava a captura de tela, a resolução não aparecia para o que eu tinha definido.

    

Answer 2

Isso só é possível com um addon do Firefox chamado Pearl Crescent Page Saver , onde você insere 200 ou 300 no valor% no definição marcada. Ele vai ampliar a página (não upscaling pixelizada), e tirar uma screenshot que é 2-3x maior do que a sua viewport é. Eu usei-o para fazer print friendly de 300-600dpi screenshots de resolução de sites e acabou por ser incrível (especialmente se o site foi retina pronto, caso contrário, apenas linhas CSS, cantos, fontes etc. foram redimensionados bem).

Estou no processo de procurar uma alternativa para o Chrome. Eu acidentalmente encontrei este plugin para o Firefox, mas parece um pouco abandonware e não funciona mais nas versões mais recentes, mas o Firefox estável mais antigo executa bem o suficiente. Pode valer a pena manter essa versão em torno apenas para isso, se não houver alternativa.