Utiliser HTML5/Canvas / JavaScript pour prendre des captures d'écran dans le navigateur
" Report a Bug "ou" Feedback Tool " de Google vous permet de sélectionner une zone de votre fenêtre de navigateur pour créer une capture d'écran qui est soumise avec vos commentaires sur un bug.
capture d'écran de Jason Small, postée dans un duplicate question .
comment font-ils ça? L'API de retour D'information JavaScript de Google est chargée à partir de ici et leur aperçu du module de rétroaction démontrera la capacité de capture d'écran.
3 réponses
JavaScript peut lire le DOM et rendre une représentation assez précise de cela en utilisant canvas . J'ai travaillé sur un script qui convertit HTML en Image de toile. 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 incluent une capture d'écran, créée sur le navigateur du client, avec le formulaire. La capture d'écran est basée sur le DOM et en tant que tel ne peut pas être 100% précis à la représentation réelle car il ne fait pas une capture d'écran réelle, mais construit la capture d'écran basée sur les informations disponibles sur la page.
It ne nécessite aucun rendu à partir 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'analyse pas presque autant les attributs CSS3 que je voudrais qu'il soit, et il n'a pas non plus de support à charger. Images CORS même si un proxy était disponible.
toujours une compatibilité de navigateur 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, consultez les exemples ici:
http://hertzen.com/experiments/jsfeedback /
modifier 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, sur la base de la documentation, la seule différence majeure est leur méthode async de traversée/dessin) peut être trouvée dans cette présentation par Elliott Sprehn de L'équipe de Google Feedback: http://www.elliottsprehn.com/preso/fluentconf /
votre application web peut maintenant prendre une capture d'écran "native" de l'ensemble du Bureau 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 les options chrome://.
Comme Niklas mention vous pouvez utiliser html2canvas de la bibliothèque pour faire une capture d'écran à l'aide de js navigateur . Je développerai la réponse dans ce point et fournir exemple de faire la capture d'écran en utilisant cette bibliothèque (dans cette section de question):
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
},
});
}.container {
margin-top: 10px;
border: solid 1px black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>
<div class="container">
<img width="75%" class="screen">
</div> dans report() fonction dans onrendered après avoir obtenu l'image en tant que données-uri vous pouvez le montrer pour l'utilisateur et lui permettre de dessiner "la région du bug" par la souris et ensuite envoyer la capture d'écran et les coordonnées de la région au serveur.