Como screenshot website em JavaScript lado do cliente / como o Google fez isso? (não há necessidade de acessar o HDD)
Estou trabalhando em um aplicativo da web que precisa renderizar uma página e fazer uma captura de canvas no lado do cliente (navegador).
Eu não preciso que a captura de canvas seja salva no HDD local, apenas guardei na RAM e enviei para o servidor de aplicativos mais tarde.
Eu pesquisei:
- Serviços do BrowserShots similares …
- Navegadores mecanizados …
- wkhtmltoimage …
- Python WebKit2PNG …
Mas nada disso me dá tudo que eu preciso, que é:
- Jquery Alterar a altura com base no tamanho do navegador / resize
- A canvas HTML5 ctx.fillText não faz quebras de linha?
- Redimensionando uma imagem em uma canvas HTML5
- Por que é putImageData tão lento?
- Processamento no lado do navegador (gerar captura de canvas da página). Não precisa ser salvo no disco rígido! Somente…
- … enviar imagem para o servidor para processamento adicional.
- Captura de página inteira (não apenas parte visível)
Eventualmente me deparei com a Ferramenta de Feedback do Google (clique em “feedback” no rodapé do YouTube para ver isso). Ele contém JavaScript para codificação JPG e dois outros scripts enormes que eu não posso determinar o que exatamente eles fazem …
Mas ele é processado no lado do Cliente – caso contrário, não faria sentido colocar esse enorme codificador JPEG no código!
Alguém tem alguma idéia de como eles fizeram / como eu posso fazer isso?
Aqui está um exemplo do feedback (relatar um bug em algumas canvass)
” Usar HTML5 / Canvas / JavaScript para tirar screenshots ” responde ao seu problema.
Você pode usar JavaScript / Canvas para fazer o trabalho, mas ainda é experimental.
Eu precisava capturar uma div na página (para uma aplicação web que eu escrevi) que é protegida por JWT e faz uso muito pesado de Angular.
Eu não tive sorte com nenhum dos methods acima.
Acabei pegando o outerHTML do div que precisava, limpando um pouco (*) e depois mandando para o servidor onde eu corro o wkhtmltopdf contra ele.
Isso está funcionando muito bem para mim.
(*) vários dispositivos de input em minhas páginas não renderizavam como marcados ou tinham seus valores de texto quando visualizados no pdf … Então, eu corro um pouco de jQuery no html antes de enviá-lo para renderização. ex: para itens de input de texto – eu copio seus .val () em atributos ‘value’, que podem ser vistos por wkhtmlpdf
O SnapEngage fornece este serviço usando um applet Java . Você pode usar seu produto Snapabug ou recriar sua funcionalidade usando as informações aqui . Você também pode ler sobre isso aqui .