Question Utilisation de HTML5 / Canvas / JavaScript pour prendre des captures d'écran dans le navigateur


"Signaler un bug" ou "Outil de rétroaction" de Google 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.

Google Feedback Tool Screenshot Capture d'écran par Jason Small, posté dans un question en double. 

Comment font-ils cela? L'API JavaScript de Google est chargée depuis ici et leur aperçu du module de feedback démontrera la capacité de capture d'écran.


794
2018-02-06 06:58


origine


Réponses:


JavaScript peut lire le DOM et en rendre une représentation assez précise en utilisant canvas. J'ai travaillé sur un script qui convertit html dans une image de toile. 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 qui incluent une capture d'écran, créée sur le navigateur des clients, avec le formulaire. La capture d'écran est basée sur le DOM et, en tant que telle, peut ne pas être exacte à 100% pour la représentation réelle car elle ne fait pas une capture d'écran réelle, mais construit la capture d'écran basée sur les informations disponibles sur la page.

Il ne nécessite aucun rendu du serveur, car l'image entière est créée sur le navigateur des clients. Le script HTML2Canvas lui-même est toujours dans un état très expérimental, car il n'analyse pas presque autant d'attributs CSS3 que je le voudrais, et il n'a aucun support pour charger les images CORS même si un proxy était disponible.

Compatibilité navigateur encore assez limitée (pas parce que plus ne pouvait pas être pris en charge, juste n'ont pas eu le temps de le rendre plus cross navigateur pris en charge).

Pour plus d'informations, regardez les exemples ici:

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

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

modifier 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 de traversée / dessin asynchrone) peut être trouvée dans cette présentation par Elliott Sprehn de l'équipe de Google Feedback: http://www.elliottsprehn.com/preso/fluentconf/


1013
2017-07-13 11:29



Votre application Web peut désormais prendre une capture d'écran «native» de l'ensemble du bureau du client en utilisant getUserMedia():

Jetez un oeil à cet exemple:

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

Le client devra utiliser chrome (pour l'instant) et devra activer la prise en charge de capture d'écran sous chrome: // flags.


54
2017-10-29 09:33



Comme Niklas mention vous pouvez utiliser html2canvas bibliothèque pour faire une capture d'écran en utilisant le navigateur js. Je vais développer la réponse à ce point et fournir un exemple de capture d'écran en utilisant cette bibliothèque (dans ce cadre de question):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Screen shoter</title>        
    <style>.container { margin-top: 10px; border: solid 1px black; }  </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>

    <div>Screenshot tester</div>
    <button onclick="report()">Take screenshot</button>

    <div class="container">
        <img width="75%" class="screen" >
    </div>

    <script>
        function report() {
            let region = document.querySelector("body"); // whole screen
            html2canvas(region, {
                onrendered: function (canvas) {
                let pngUrl = canvas.toDataURL();
                let img = document.querySelector(".screen");
                img.src = pngUrl;  // pngUrl contains screenshot graphics data in url form

                // here you can allow user to set bug-region
                // and send it with 'pngUrl' to server


                },
            });
        }
    </script>
</body>
</html>

Voici exemple de travail.

Dans report() fonctionner dans onrendered après avoir obtenu l'image en tant que uri de données, vous pouvez le montrer à l'utilisateur et lui permettre de dessiner "région de bug" par la souris, puis envoyer les captures d'écran et les coordonnées de la région au serveur.


1
2017-07-01 19:25