Utiliser HTML5 / Canvas / JavaScript pour prendre des captures d’écran dans le navigateur

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 soumise avec vos commentaires sur un bogue.

Capture d'écran de Google Feedback Tool Capture d’écran de Jason Small, publiée dans une question en double .

Comment font-ils cela? L’API de retour JavaScript de Google est chargée à partir de là et leur vue d’ensemble du module de commentaires montrera la capacité de capture d’écran.

JavaScript peut lire le DOM et afficher une représentation assez précise à l’aide de canvas . J’ai travaillé sur un script qui convertit le HTML en une image de canvas. Décidé aujourd’hui d’en faire une implémentation en envoyant des retours comme vous l’avez décrit.

Le script vous permet de créer des formulaires de commentaires comprenant une capture d’écran, créée sur le navigateur du client, ainsi que le formulaire. La capture d’écran est basée sur le DOM et, en tant que telle, ne peut pas être précise à 100%, car elle ne fait pas de capture d’écran, mais crée la capture d’écran en fonction des informations disponibles sur la page.

Il ne nécessite aucun rendu du serveur , car l’image entière est créée sur le navigateur du client. Le script HTML2Canvas lui-même est encore dans un état très expérimental, car il n’parsing pas à peu près autant d’atsortingbuts CSS3 que je le souhaite, ni ne prend en charge le chargement d’images CORS même si un proxy était disponible.

Compatibilité des navigateurs encore assez limitée (non pas parce que d’autres ne pouvaient pas être supportés, mais n’ont pas eu le temps de la rendre plus compatible avec le navigateur).

Pour plus d’informations, consultez les exemples ici:

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

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

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

Votre application Web peut maintenant prendre une capture d’écran «native» du bureau entier du client en utilisant getUserMedia() :

Regardez cet exemple:

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

Le client devra utiliser chrome (pour l’instant) et devra activer le support de capture d’écran sous chrome: // flags.

Comme Niklas le mentionne, vous pouvez utiliser la bibliothèque html2canvas pour créer une capture d’écran à l’aide du navigateur js. Je développerai la réponse à ce point et donnerai un exemple de capture d’écran à l’aide de cette bibliothèque (dans ce cadre de question):

 < !DOCTYPE html>    Screen shoter     
Screenshot tester

Voici un exemple de travail .

Dans report() fonction onrendered après avoir obtenu l’image en tant que data-uri, vous pouvez le montrer à l’utilisateur et lui permettre de dessiner “région de bogue” avec la souris, puis envoyer les coordonnées de la capture d’écran et de la région au serveur.