Capture d'écran du contenu du navigateur (site web) [fermé]
Mon objectif est d'avoir une image d'un site web (Oui, aussi simple que cela). Je sais qu'il y a des outils comme html2canvas . Cependant, je ne veux pas que le navigateur client affiche la capture d'écran.
une raison est que j'utilise une extension chrome avec un webview qui se comporte essentiellement comme un iFrame . Pour des raisons de sécurité, la capture d'écran d'un site Web contenant un iFrame ne fonctionne pas.
je sais aussi qu'ils travaillent sur la capacité de nativement soutenir la capture d'écran de site web mais je veux une solution de navigateur croisé et ne pas dépendre de la possibilité du navigateur. Tout cela se passe sur un serveur donc il devrait être exécutable via la ligne de commande.
ce que je fais maintenant est:
- Ouvrez le navigateur via la ligne de commande
- passer à fenêtre du navigateur via la ligne de commande
- Faire une capture d'écran (screencapture sur mac, scrot sur Linux) via la ligne de commande
le faire à ce niveau de base présente l'inconvénient de l'image contenant des barres d'état, des trucs de plugin de navigateur, etc. En fait, je veux seulement avoir le contenu du site web sans tous ces trucs spécifiques à l'application.
- la pire solution serait de coder la position 0/0 du contenu par rapport à la fenêtre pour chaque navigateur . C'est merdique (pour des raisons évidentes).
- une Autre solution que j'ai trouvé est: dire au navigateur (je peux parler à un plugin via socket) pour ajouter quelque chose comme un QR-Code À x:0;y:0;, envoyer la capture d'écran au serveur de traitement d'image. Après cela, supprimez le QR-Code et envoyez à nouveau la capture d'écran. Puis J'Ai savoir chaque point relatif à 0/0 mais il n'est pas aussi élégant.
la meilleure chose serait un outil en ligne de commande qui me permet de déterminer quelle partie d'une application je veux capturer une image.
un exemple est ce plugin pour Firefox ou cet outil côté serveur ou tous ces outils fournissant des captures d'écran de sites Web avec différents navigateurs et OS comme ce . Je me demande comment ils se débarrassent des éléments GUI spécifiques au navigateur.
Plus :
Je ne sais pas si j'ai été assez clair, mais je veux une capture d'écran d'un contenu d'un navigateur spécifique, mais sans les éléments GUI spécifiques au navigateur. Cela signifie qu'une application utilisant un navigateur sans tête n'aura aucune utilité pour moi. Parce que le navigateur sans a son propre moteur. Je veux spécifiquement avoir une capture d'écran d'e.g. Firefox version X.
7 réponses
connaissez-vous le sélénium? C'est un outil de test qui ouvre en fait un navigateur spécifique et exécute des tests scriptés. Il peut être utilisé pour prendre des captures d'écran.
Awesomescreenshot va faire défiler la page en prenant des screenshots réels, puis mettre ces images ensemble dans une image longue pour vous. Vous pouvez même le mettre à capturer uniquement la partie de la page qui montre, ou une section sélectionnée.
vous pouvez mélanger cela avec un programme de type macro/langage de script comme touches automatiques . Il se peut que vous trouviez cela plus facile que d'utiliser la ligne de commande. Je suppose que cela dépend de ce que vous essayez de faire.
la plupart des langages côté serveur ne servent que le HTML et ne le rendent jamais. Il y a quelque temps, j'ai rencontré la question de l'indexation des applications javascript à page unique et l'une des solutions était phantomJS .
PhantomJS fait exactement ce que vous voulez. Vous pouvez rendre le HTML (Server-side) et Phantom a aussi canvas intégré pour que vous puissiez le screenshot en utilisant cela. Phantom est webkit donc il couvrira la plupart des navigateurs populaires (Chrome, Safari, Opera). Si vous voulez voir à quoi ressemblera le site web sur Firefox vous pouvez essayer SlimerJS (similaire à PhantomJs mais fonctionne le moteur Gecko).
cela couvrirait tous les navigateurs les plus populaires (sauf IE). Il s'agit toujours d'une solution sans tête, mais vous pourriez voir différents moteurs de mise en page. Vous aurez besoin de NodeJS et il peut être un peu d'apprentissage, mais ils ont tous les deux de la documentation sur les captures d'écran. Bonne chance!
il y a 2 façons de le faire:
- créer un plugin pour Firefox ou Chrome
la capture d'écran est prise en créant une toile superposée sur la page. L'image est prise à partir du document, de sorte que l'interface utilisateur du navigateur ne fait pas partie de l'image.
- Re-créer un navigateur (PhantomJS, TrifleJS)
il n'y a pas D'interface utilisateur de navigateur en premier lieu.
Il ya divers outils open source ainsi que payés pour faire la même chose. Mais, en gardant à l'esprit les raisons de sécurité. Je vous suggérerai d'utiliser l'extension " Save to Drive " par Google lui-même.
cela vous fournira un moyen plus sûr pour enregistrer des captures d'écran directement sur votre lecteur google et avec les captures d'écran, il permet également aux utilisateurs de sauvegarder des photos ou d'autres documents sur le lecteur google.
/ / Deuxième Suggestion / /
Si vous ne souhaitez pas utiliser l'extension ensuite, vous pouvez utiliser 'Blipshot' , c'est un outil open source, également disponible sur GitHub.
/ / Troisième Suggestion / /
la troisième meilleure solution est " ".
ces trois outils sont quelques-uns des screenshot les mieux notés outils pour Google Chrome ainsi que d'autres navigateurs.
j'espère que ça vous aidera!
plusieurs combinaisons de navigateur, version et plate-forme os
pour capturer des captures d'écran de pages Web avec navigateur spécifique et la version nécessite un cadre qui peut lancer, exécuter et capturer dans tous ces navigateurs, En outre la question n'a pas précisé si elle est également nécessaire pour les plates-formes spécifiques en combinaison avec lesdits navigateurs et versions, comme sur OSX, Windows, Linux, Android, etc les différentes versions de ces plates-formes vont encore augmenter les possibilités combinaison.
- Vous auriez besoin pour l'installation, le maintien de ces navigateurs
- trouver ou créer un cadre pour les piloter, sélénium probablement votre meilleur pari
- surmontez le manque de support dans le sélénium pour certaines combinaisons navigateur / système D'exploitation
- une infrastructure qui gère cela et expose comme dans une API nice pour une utilisation
il existe cependant une solution existante, ou une solution connexe pour cela, par exemple:
comme pour obtenir des captures d'écran dans le navigateur spécifique, version, plate-forme, etc.
http://browsershots.org / est libre et a un grand ensemble de combos de navigateur, pas très clair si vous pouvez y accéder par programmation cependant.
l'Obtention de ce fait tout simplement appel et les API existantes
crossbrowsertesting.com est un service (essai gratuit) qui semble satisfaire toutes les exigences.
a la technologie qui peut faire cela
http://usersnap.com prend en charge beaucoup de navigateurs, à la fois de bureau et mobile et a fait beaucoup de travail pour obtenir pixel capture d'écran parfaite sur les serveurs, étant identique à ce que l'utilisateur verrait dans leur environnement.
ingénieurs se concentrent sur la solution comme exigence...
As est tellement typique pour les types d'ingénierie américains, nous sommes coincés dans la façon de mettre en œuvre une solution spécifique. Il n'est pas clair par la question quel problème obtenir ces screenshots va résoudre, c.-à-d. l'exigence sous-jacente. Si cela était connu peut-être il y a d'autres approches plus simples disponibles?
j'ai eu un peu de chance dans le passé avec XULRunner
vous pouvez essayer la routine décrite ici: https://blog.builtwith.com/2010/07/02/mozilla-automated-website-screen-grabber/
qui exécute essentiellement un shell de Firefox et automatise le processus de saisie de screenshots. Il peut avoir besoin de quelques retouches, mais je pense qu'il pourrait répondre à vos exigences telles qu'elles sont écrites.