À l'aide de HTML5/Canvas/JavaScript pour prendre des captures d'écran

Question

Google "Signaler un Bug" ou "Outil de Rétroaction" vous permet de sélectionner une zone de la fenêtre de votre navigateur pour créer une capture d'écran qui lui est soumise avec vos commentaires à propos d'un bug.

_{Capture d'écran par Jason Petit, posté dans une double question.}

Comment font-ils cela? JavaScript de Google feedback API est chargé à partir d' ici, et leur vue d'ensemble du module de rétroaction fera la démonstration de la capture d'écran de capacité.

Answer 1

JavaScript peut lire les DOM et de rendre une représentation assez exacte de l'utilisation de canvas. J'ai travaillé sur un script qui convertit html en une toile de l'image. A décidé aujourd'hui de faire une application en envoyant des feedbacks comme vous l'avez décrit.

Le script vous permet de créer des formulaires de rétroaction qui comprennent une capture d'écran, créé sur le navigateur client, avec la forme. La capture d'écran est basé sur les DOM et en tant que telle ne peut pas être précis à 100% pour la représentation réelle car il ne permet pas de créer une capture d'écran, mais s'appuie la capture d'écran sur la base des informations disponibles sur la page.

Il ne nécessite pas de rendu à partir du serveur, comme l'ensemble de l'image est créée sur le navigateur client. Le HTML2Canvas script lui-même est encore très expérimental de l'état, car il ne pas analyser à peu près autant de la CSS3 attributs que je ne veux, ni ne dispose d'aucun soutien à la charge de la SCRO images, même si un proxy est disponible.

Encore assez limité de compatibilité de votre navigateur (pas parce que plus ne pouvait pas être pris en charge, n'ont tout simplement pas eu le temps de faire plus de la croix-navigateur pris en charge).

Pour plus d'informations, jetez un oeil sur les exemples ici:

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

modifier Le html2canvas script est maintenant disponible séparément ici et la quelques exemples ici.

edit 2 Une autre confirmation que Google utilise une méthode très similaire, (en fait basée sur la documentation la seule différence majeure est leur méthode asynchrone de la traversée/dessin) peut être trouvé dans cette présentation par Elliott Sprehn de la Google Feedback de l'équipe: http://www.elliottsprehn.com/preso/fluentconf/

Answer 2

Votre application web peut maintenant prendre un "native" capture d'écran du client de l'ensemble du bureau en utilisant WebRtc:

http://www.webrtc.org/

Jetez un oeil à cet exemple:

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

Le client devra être en utilisant chrome (pour l'instant) et vous devrez activer la capture d'écran de soutien sous chrome://flags.