À l'aide de HTML5/Canvas/JavaScript pour prendre en captures d'écran
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 un double question.
Comment font-ils cela? JavaScript de Google feedback API est chargé de ici et leur vue d'ensemble du module de commentaires fera la démonstration de la capture d'écran de capacité.
- Elliott Sprehn a écrit dans un Tweet il ya quelques jours: > @CatChen Que stackoverflow post n'est pas exacte. Google Feedback de la capture d'écran est faite entièrement de côté client. 🙂
- Cela semble logique qu'ils veulent attraper exactement comment le navigateur de l'utilisateur est le rendu d'une page, et non pas comment ils pourraient se rendre sur le côté serveur à l'aide de leur moteur. Si vous ne envoyer la page en cours DOM pour le serveur, il va manquer des incohérences dans la façon dont le navigateur est rendu HTML. Cela ne signifie pas Chen réponse est fausse pour prendre des captures d'écran, il semble juste comme Google est de le faire d'une manière différente.
- Elliott mentionné Jan Kuča aujourd'hui, et j'ai trouvé ce lien dans Jan tweet: jankuca.tumblr.com/post/7391640769/...
- Je vais creuser dans cette plus tard et de voir comment il peut être fait avec rendu côté client moteur et vérifier si Google est en fait le faire de cette façon.
- Je vois l'utilisation de compareDocumentPosition, getBoxObjectFor, toDataURL, drawImage, suivi de rembourrage et des choses comme ça. Il y a des milliers de lignes de code masqué de dissimuler et de regarder à travers bien. Je serais ravi de voir un open source sous licence de la version de cela, j'ai contacté Elliott Sprehn!
- vérifier mon approche du dessin de la page dans la toile à l'aide de principalement
getBoundingClientRect
- Juste ajouter cette question fantastique, j'ai une maison pauvre mans solutions 5 ans plus tard, codepen.io/damPop/stylo/GwqxvM?les éditeurs=0110. Très bonne question, l'attention au détail et de réponses!
Vous devez vous connecter pour publier un commentaire.
JavaScript peut lire les DOM et de rendre une représentation assez exacte de cette aide
canvas
. J'ai travaillé sur un script qui convertit HTML en un canevas 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 du 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 du 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 d'attributs CSS3 je, et 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 certains des 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/
getBoundingClientRect
, la première version que j'ai fait était sans elle, basée sur le rappel de l'élément parent positions et de l'application de rembourrage de marges et de tout ce que manuellement, mais les résultats n'étaient pas tout à fait aussi précis. Avec getBoundingClientRect vous obtenez pixel des résultats précis, même pour le texte avec un peu de manipulation sur eux.black out all $('.private')
?De votre application web peut maintenant prendre un "native" capture d'écran du client de l'ensemble du bureau à l'aide de
getUserMedia()
:Ont un coup d'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.
Comme Niklas mentionné vous pouvez utiliser le html2canvas bibliothèque pour prendre une capture d'écran à l'aide de JS dans le navigateur. Je vais étendre sa réponse sur ce point, en fournissant un exemple de prendre une capture d'écran à l'aide de cette bibliothèque:
JS:
CSS:
HTML:
Dans
report()
fonction dansonrendered
après l'obtention de l'image que les données URI, vous pouvez l'afficher à l'utilisateur et lui permettre de tirer des "bug de la région" par la souris et ensuite envoyer une capture d'écran et de la région coordonne sur le serveur.Dans cet exemple
async/await
version a été faite: avec nicemakeScreenshot()
fonction.Mise à JOUR
Exemple Simple qui vous permet de prendre une capture d'écran, sélectionnez une région, d'en décrire le bug et envoi d'une requête POST (ici jsfiddle) (la fonction principale est
report()
).JS:
CSS:
HTML:
Heres un exemple d'utilisation: getDisplayMedia
Aussi vaut le détour est le Capture d'écran de l'API docs.