Prenez une capture D'écran du navigateur via JavaScript (ou autre chose)
Pour des raisons de support, je veux pouvoir qu'un utilisateur prenne une capture d'écran de la fenêtre du navigateur actuelle aussi facilement que possible et l'envoie au serveur.
Des idées (folles)?
15 réponses
Cela semblerait être un trou de sécurité assez important dans JavaScript si vous pouviez le faire. Imaginez un utilisateur malveillant installer ce code sur votre site avec une attaque XSS, puis capture d'écran tout votre travail quotidien. Imaginez que cela se passe avec vos services bancaires en ligne...
Cependant, il est possible de faire ce genre de chose en dehors de JavaScript. J'ai développé une application Swing qui utilisait du code de capture d'écran comme celui-ci qui a fait un excellent travail en envoyant un e-mail au helpdesk avec une capture d'écran jointe chaque fois que L'Utilisateur a rencontré une RuntimeException.
Je suppose que vous pourriez expérimenter avec une applet Java signée (choc! horreur! nooon!) qui traîné dans le coin. S'il est exécuté avec les privilèges de sécurité appropriés donnés lors de l'installation, il peut être contraint d'exécuter ce type de code de capture d'écran.
Pour plus de commodité, voici le code du site auquel j'ai lié:
import java.awt.Dimension;
import java.awt.Rectangle;
import java.awt.Robot;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.io.File;
...
public void captureScreen(String fileName) throws Exception {
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
Rectangle screenRectangle = new Rectangle(screenSize);
Robot robot = new Robot();
BufferedImage image = robot.createScreenCapture(screenRectangle);
ImageIO.write(image, "png", new File(fileName));
}
...
Vous pouvez essayer de rendre la page entière dans canvas et enregistrer cette image sur le serveur. amusez-vous :)
Une page web ne peut pas faire cela (ou du moins, je serais très surpris si cela pouvait, dans n'importe quel navigateur) mais une extension Firefox peut le faire. Tu vois https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas -- lorsque cette page indique "privilèges Chrome", cela signifie qu'une extension peut le faire, mais pas une page web.
Me semble que le support a besoin (au moins) des réponses à deux questions:
- à quoi ressemble l'écran? et
- Pourquoi ça ressemble à ça?
Une capture d'écran-un visuel - est très nécessaire et répond à la première question, mais elle ne peut pas répondre à la seconde.
Comme première tentative, j'essaierais d'envoyer la page entière au support. Le support technique pourrait afficher cette page dans son navigateur (répond à la première question); et pourrait également voir l'état actuel du code html du client (aide à répondre à la deuxième question).
J'essaierais d'envoyer autant de la page que possible au client JS par AJAX ou comme charge utile d'un formulaire. J'enverrais également des informations non sur la page: Tout ce qui affecte l'état de la page, comme les cookies ou les identifiants de session ou autre.
Le cust peut avoir un bouton de type submit pour démarrer le processus.
Je pense que ça marcherait. Voyons voir: il a besoin de CGI quelque part sur le serveur qui attrape le entrant page utilisateur et le rend disponible pour soutenir, peut - être en écrivant un fichier disque. Ensuite, la personne de soutien peut charger (ou ont chargé automatiquement) cette même page. Toutes les autres informations (cookies et ainsi de suite) peuvent être mises dans la page que le support voit.
PLUS: le JS client qui gère le bouton de soumission onclick () peut également inclure toutes les valeurs de variables js utiles!
Hé, ça peut marcher! Je suis excité :-)
HTH
-- pete
J'ai vu des gens faire cela avec deux approches:
Configurez un serveur séparé pour la capture d'écran et exécutez un tas d'instances firefox, consultez ces deux gemmes si vous le faites dans ruby:
selenium-webdriveretheadlessUtilisation d'une solution hébergée comme http://url2png.com (plus facile)
Veuillez consulter la réponse partagée ici pour une implémentation relativement réussie de ceci: https://stackoverflow.com/a/6678156/291640
Utilisation: https://github.com/niklasvh/html2canvas
Vous pouvez essayer PhantomJs, une boîte à outils de navigation headlesss. http://phantomjs.org/
L'exemple Javascript suivant montre la fonctionnalité de capture d'écran de Base:
var page = require('webpage').create();
page.settings.userAgent = 'UltimateBrowser/100';
page.viewportSize = { width: 1200, height: 1200 };
page.clipRect = { top: 0, left: 0, width: 1200, height: 1200 };
page.open('https://google.com/', function () {
page.render('output.png');
phantom.exit();
});
Je comprends que ce post a 5 ans, mais pour les futures visites, je vais ajouter ma propre solution ici qui, je pense, résout la question du post original sans aucune bibliothèque tierce en dehors de jQuery.
pageClone = $('html').clone();
// Make sure that CSS and images load correctly when opening this clone
pageClone.find('head').append("<base href='" + location.href + "' />");
// OPTIONAL: Remove potentially interfering scripts so the page is totally static
pageClone.find('script').remove();
htmlString = pageClone.html();
Vous pouvez supprimer d'autres parties du DOM que vous pensez inutiles, comme le formulaire de support s'il se trouve dans une fenêtre modale. Ou vous pouvez choisir de ne pas supprimer les scripts si vous préférez maintenir une certaine interaction avec les contrôles dynamiques.
Envoie cette chaîne au serveur, soit dans un champ caché ou par AJAX, puis du côté du serveur, attachez tout le lot en tant que fichier HTML à l'e-mail de support.
Les avantages de ceci sont que vous obtiendrez non seulement une capture d'écran mais toute la page défilante dans sa forme actuelle, plus vous pouvez même inspecter et déboguer le DOM.
Écran D'Impression? Old school et quelques touches, mais ça marche!
En JavaScript? Aucun. Je travaille pour une société de sécurité (sorte de trucs de type NetNanny) et le seul moyen efficace que nous avons trouvé pour faire des captures d'écran de l'utilisateur est avec une application cachée.
Nous collectons temporairement les États Ajax, les données dans les champs de formulaire et les informations de session. Ensuite, nous le restituons au bureau d'assistance. Puisque nous testons et intégrons pour tous les navigateurs, il n'y a pratiquement aucun cas de support pour des raisons d'affichage.
Avoir un regard sur le bouton rouge en bas sur holidaycheck
Sinon, il y a html2canvas de Google. Mais il est seulement applicable pour les navigateurs jamais et je ne l'ai jamais essayé.
Vous pouvez également le faire avec le plugin Fireshot. J'utilise le code suivant (que j'ai extrait du code API, donc je n'ai pas besoin d'inclure L'API JS) pour faire un appel direct à L'objet Fireshot:
var element = document.createElement("FireShotDataElement");
element.setAttribute("Entire", true);
element.setAttribute("Action", 1);
element.setAttribute("Key", "");
element.setAttribute("BASE64Content", "");
element.setAttribute("Data", "C:/Users/jagilber/Downloads/whatev.jpg");
if (typeof(CapturedFrameId) != "undefined")
element.setAttribute("CapturedFrameId", CapturedFrameId);
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("capturePageEvt", true, false);
element.dispatchEvent(evt);
Remarque: Je ne sais pas si cette fonctionnalité est disponible uniquement pour la version payante ou non.
Peut-être http://html2canvas.hertzen.com / pourrait être utilisé. Ensuite, vous pouvez capturer l'affichage, puis le traiter.