Capture d'écran du contenu du navigateur (site Web)
Mon objectif est d’avoir une image de site Web (oui, aussi simple que cela). Je sais qu’il existe des outils tels que html2canvas . Cependant, je ne veux pas que le navigateur client rende la capture d'écran.
Une des raisons est que j'utilise une extension chrome avec webview qui se comporte essentiellement comme un iFrame. Pour des raisons de sécurité, le rendu d'une capture d'écran pour un site Web contenant une iFrame ne fonctionne pas.
Je sais aussi qu'ils travaillent sur la possibilité de prendre en charge de manière native la capture de captures d'écran de sites Web mais je veux une solution multi-navigateurs et ne pas dépendre de la possibilité du navigateur. Tout cela se passe sur un serveur, il devrait donc être exécutable via une ligne de commande.
Ce que je fais maintenant c'est:
- Ouvrir le navigateur via la ligne de commande
- Basculer vers la fenêtre du navigateur via la ligne de commande
- Faire une capture d'écran (capture d'écran sur mac, scrot sur Linux) via la ligne de commande
Le faire à ce niveau de base a l’inconvénient que l’image contenant les barres d’état, le plug-in de navigateur, etc. contient des images. En fait, je veux seulement avoir le contenu réel contenu du site Web sans toutes ces informations spécifiques à l’application.
- La pire solution serait de coder en dur 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 proposée est la suivante: indiquez au navigateur (je peux parler À un plugin via socket) d'ajouter quelque chose comme un code QR à x: 0; y: 0 ;, envoyez la capture d'écran à le serveur de traitement d'image. Après cela, supprimez le code QR et renvoyez la capture d'écran. Ensuite, je Connais chaque point relatif à 0 | 0 mais il n’est pas aussi élégant.
La meilleure chose à faire serait un outil de ligne de commande qui me permette de déterminer quelle partie de l'application je souhaite 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 systèmes d'exploitation du type this . Je me demande comment ils se débarrassent des éléments d'interface graphique spécifiques au navigateur.
Une addition:
Je ne sais pas si j'ai été suffisamment clair, mais je souhaite une capture d'écran du contenu d'un navigateur spécifique, mais sans les éléments de l'interface graphique spécifiques à chaque navigateur. Cela signifie qu'une application utilisant un navigateur sans navigateur ne m'utilisera plus. Parce que le navigateur sans tête a son propre moteur. Je veux spécifiquement avoir une capture d'écran de par exemple. Firefox version x.
Connaissez-vous Selenium? C’est un outil de test qui ouvre un navigateur spécifique et exécute des tests avec script. Il peut également être utilisé pour faire des captures d’écran.
Awesomescreenshot va réellement faire défiler la page en prenant des captures d'écran réelles, puis mettre ces images ensemble dans une longue image pour vous. Vous pouvez même le configurer pour ne capturer que la partie de la page affichée ou une section sélectionnée.
Vous pouvez mélanger cela avec un programme de type macro/langage de script tel que Touches d'accès rapide automatiques . Vous le trouverez peut-être plus facilement 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 servent simplement le code HTML et ne le rendent jamais. Il y a quelque temps, j'ai rencontré l'indexation d'applications javascript sur une seule page et l'une des solutions était phantomJS .
PhantomJS fait exactement ce que vous voulez. Vous pouvez restituer le code HTML (côté serveur) et Phantom intègre également un canevas afin que vous puissiez le capturer avec cette capture. Phantom est un kit Web qui 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 avec le moteur Gecko).
Cela couvrirait tous les navigateurs les plus populaires (sauf IE). C'est toujours une solution sans tête, mais vous seriez capable de voir différents moteurs de disposition. Vous aurez besoin de NodeJS et c'est peut-être un peu d'apprentissage, mais ils ont tous deux de la documentation sur les captures d'écran. Bonne chance!
Nombreuses combinaisons de navigateurs, de versions et de plateformes
Capturer des captures d'écran de pages Web avec un navigateur et une version spécifiques nécessite un framework capable de se lancer, de s'exécuter et de capturer dans tous ces navigateurs. De plus, la question ne précisait pas si elle était également requise pour des plates-formes spécifiques en combinaison avec lesdits navigateurs et versions, comme sur OSX, Windows, Linux, Android, etc., différentes versions de ces plates-formes vont encore augmenter les combinaisons possibles.
- Vous auriez besoin de configurer, maintenir ces navigateurs
- Trouvez ou créez un framework pour les piloter, Selenium est probablement votre meilleur pari
- Surmonter le manque de support de Selenium pour certaines combinaisons navigateur/système d'exploitation
- Une infrastructure qui gère cela et s'expose comme dans une API Nice à utiliser
Il existe cependant une solution existante ou une solution associée à cela, par exemple:
Pour ce qui est d’obtenir des captures d’écran dans un navigateur, une version, une plate-forme, etc.
http://browsershots.org/ est gratuit et propose un grand nombre de combinaisons de navigateurs, pas très clair si vous pouvez y accéder par programmation.
Faire cela simplement en appelant et avec une API existante
crossbrowsertesting.com est un service commercial (essai gratuit) qui semble satisfaire à toutes les exigences.
A la technologie qui peut le faire
http://usersnap.com prend en charge de nombreux navigateurs, de bureau et mobiles, et a beaucoup travaillé pour obtenir une capture d'écran parfaite en pixels sur les serveurs, étant identique à ce que les utilisateurs verraient dans leur environnement.
Les ingénieurs se concentrent sur la solution en tant qu'exigence ...
Comme il est si typique pour nous, types d'ingénierie, nous sommes coincés dans la mise en œuvre d'une solution spécifique. La question qui se pose n’est pas claire de savoir quel problème l’obtention de ces captures d’écran va résoudre, c’est-à-dire l’exigence sous-jacente. Si cela était connu, peut-être y aurait-il d'autres approches plus simples?
Il existe divers outils open source ainsi que payés pour faire la même chose. Mais gardez à l’esprit les raisons de sécurité. Je vous suggère d'utiliser 'Enregistrer sur le lecteur' extension par Google même.
Cela vous fournira un moyen plus sûr de sauvegarder des captures d'écran directement sur votre lecteur Google. Parallèlement aux captures d'écran, vous pourrez également enregistrer des images ou d'autres documents sur le lecteur Google.
// Deuxième suggestion //
Si vous ne souhaitez pas utiliser l'extension ci-dessus, vous pouvez utiliser 'Blipshot', il s'agit d'un outil open source, également disponible sur GitHub.
// Troisième suggestion //
La troisième meilleure solution est Capture d'écran pleine page .
Ces trois outils sont quelques-uns des outils de capture d'écran les mieux notés pour Google Chrome ainsi que pour les autres navigateurs.
J'espère que ça t'aide!
Il y a 2 façons de le faire:
- Créer un plugin pour Firefox ou Chrome
La capture d'écran est réalisée en créant une superposition de toile sur la page. L'image est extraite du document, l'interface utilisateur du navigateur ne fait donc pas partie de l'image.
- Recréer un navigateur (PhantomJS, TrifleJS)
Il n'y a pas d'interface utilisateur de navigateur en premier lieu.
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 capture de captures d'écran. Cela nécessitera peut-être quelques ajustements, mais je pense que cela pourrait répondre à vos exigences.