Usando HTML5 / Canvas / JavaScript para capturar imagens do navegador

O “Reportar um Bug” do Google ou a “Ferramenta de Comentários” permitem que você selecione uma área da janela do seu navegador para criar uma captura de canvas enviada com seu feedback sobre um bug.

Captura de tela da ferramenta de feedback do Google Captura de canvas de Jason Small, postada em uma pergunta duplicada .

Como eles estão fazendo isso? A API de feedback JavaScript do Google é carregada a partir daqui e a visão geral do módulo de feedback demonstrará o recurso de captura de canvas.

O JavaScript pode ler o DOM e renderizar uma representação bastante precisa disso usando a canvas . Eu tenho trabalhado em um script que converte html em uma imagem de canvas. Decidiu hoje para fazer uma implementação em enviar feedbacks como você descreveu.

O script permite criar formulários de feedback que incluem uma captura de canvas, criada no navegador do cliente, junto com o formulário. A captura de canvas é baseada no DOM e, como tal, pode não ser 100% precisa da representação real, pois ela não cria uma captura de canvas real, mas cria a captura de canvas com base nas informações disponíveis na página.

Ele não requer nenhuma renderização do servidor , pois a imagem inteira é criada no navegador do cliente. O próprio script HTML2Canvas ainda está em um estado muito experimental, já que ele não analisa quase tanto os atributos CSS3 que eu gostaria, nem tem suporte para carregar imagens CORS, mesmo se um proxy estivesse disponível.

Ainda bastante limitada compatibilidade com o navegador (não porque mais não poderia ser suportado, apenas não tive tempo para torná-lo mais cross browser suportado).

Para mais informações, veja os exemplos aqui:

http://hertzen.com/experiments/jsfeedback/

edit O script html2canvas agora está disponível separadamente aqui e alguns exemplos aqui .

editar 2 Outra confirmação de que o Google usa um método muito semelhante (na verdade, baseado na documentação, a única grande diferença é o método asynchronous de traversing / drawing) pode ser encontrado nesta apresentação por Elliott Sprehn da equipe do Google Feedback: http: / /www.elliottsprehn.com/preso/fluentconf/

Seu aplicativo da web agora pode capturar uma captura de canvas ‘nativa’ da área de trabalho inteira do cliente usando getUserMedia() :

Dê uma olhada neste exemplo:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

O cliente precisará estar usando o chrome (por enquanto) e precisará ativar o suporte à captura de canvas em chrome: // flags.

Como Niklas menciona, você pode usar a biblioteca html2canvas para fazer screenshots usando o navegador js. Vou desenvolver uma resposta neste ponto e fornecer exemplo de captura de canvas usando esta biblioteca (neste quadro de perguntas):

     Screen shoter     
Screenshot tester

Aqui está o exemplo de trabalho .

Na function report() em onrendered depois de obter a imagem como data-uri você pode mostrá-lo ao usuário e permitir que ele desenhe “região de bug” pelo mouse e, em seguida, enviar coordenadas de captura de canvas e região para o servidor.