DoCow
  1. DoCow
  3. Como screenshot website em JavaScript lado do cliente / como o Google fez isso? (não há necessidade de acessar o HDD)
Intereting Posts
Regra-de-três torna-se regra de cinco com C ++ 11? O HTML5 permitirá que os aplicativos da web façam conexões HTTP ponto a ponto? Reagir em hotkey global em um programa Java no Windows / Linux / Mac? A hora atual em microssegundos em java Vantagens de usar o forward Tempo de época do Unix para o object Java Date FB OpenGraph og: imagem não puxa imagens (possivelmente https?) orderBy vários campos no Angular Como definir variables ​​de ambiente com espaços? Remover inputs duplicadas usando um script Bash Como você trabalha com uma matriz de jQuery Deferreds? O vídeo HTML5 não será reproduzido Como esperar por um número de threads para completar? Como pode um valor de flutuação primitivo ser -0,0? O que isso significa? IOS 6 força a orientação do dispositivo para paisagem

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:

  1. Serviços do BrowserShots similares …
  2. Navegadores mecanizados …
  3. wkhtmltoimage …
  4. Python WebKit2PNG …

Mas nada disso me dá tudo que eu preciso, que é:

  1. Processamento no lado do navegador (gerar captura de canvas da página). Não precisa ser salvo no disco rígido! Somente…
  2. … enviar imagem para o servidor para processamento adicional.
  3. 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)

Exemplo de erro de feedback / relatório

    ” 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 .