Comment prendre une capture d'écran qui inclut un élément de défilement dans une page Web dans Firefox?
Je dois prendre une capture d'écran d'une page Web entière. L'astuce est que j'ai besoin de la capture d'écran pour inclure tout le contenu d'un seul élément qui ne rentre pas dans l'écran.
C'est une table à une seule colonne qui a une barre de défilement en raison de sa hauteur. Ce n'est pas un IFRAME (qui serait simple à charger dans son propre onglet).
La colonne contient du texte formaté et quelques petites images.
Pour les longues pages Web qui défilent, il est facile d'exécuter cette tâche. Mais comment peut-il être accompli quand il contient un élément individuel dans la page qui défile?
Pour être clair, je dois capturer la page entière, pas seulement l'élément lui-même.
Je voudrais accomplir ceci en utilisant Firefox sous Windows.
Ma suggestion est d'utiliser la fonctionnalité intégrée de Firefox qui vous permet de prendre des captures d'écran d'un seul élément du DOM.
Il suffit d'ouvrir les outils de développement → Trouver l'élément → Clic droit et prendre une capture d'écran
_ {Cela n'a pas fonctionné sur l'un de mes sites internes, donc je ne peux pas dire que cela fonctionnera pour tous.} _
Mise à jour après la modification de l'OP:
Si vous avez l'intention d'enregistrer toute la page avec l'ensemble du contenu de l'élément DOM, comme indiqué ci-dessous, vous devez modifier en direct la hauteur de l'élément DOM but ...
Il va pousser beaucoup d’éléments DOM hors de la fenêtre et de la capture d’écran ou, autant que je sache, aucun autre outil ne le capturera, ce qui va bien à mon sens.
Lire ci-dessous à partir de https://en.wikipedia.org/wiki/Screenshot
Une capture d'écran, une capture d'écran, une capture d'écran, une capture d'écran, une capture d'écran ou une capture d'écran est une image prise par une personne pour enregistrer les éléments visibles affichés sur le moniteur, le téléviseur ou un autre périphérique de sortie visuelle en cours d'utilisation.
Si je devais vraiment le faire à votre façon, je créerais un GIF ou prendrais deux captures d'écran, une page entière et l'autre seulement de l'élément DOM, pour en fusionner une.
Vous pouvez utiliser la commande screenshot de la barre d’outils du développeur:
Presse Shift + F2 pour ouvrir la barre d’outils ou la sélectionner dans le menu Outils de Web Developer.
Dans la barre d’outils, tapez la commande
screenshot --fullpage fullpage.png.
Pour capturer un seul élément, vous pouvez utiliser son sélecteur css avec l'indicateur --selector, par exemple.
screenshot --selector #hot-network-questions
vous obtiendrez l'image ci-dessous
Utilisez Firefox Responsive Design Mode , définissez la largeur sur quelque chose de normal et la hauteur telle qu'elle suffise à englober la page entière, cliquez sur le bouton de capture d'écran (l'icône de caméra).
Il existe un logiciel appelé Snagit qui peut résoudre votre problème. Ce logiciel peut prendre la capture d’écran sous différents types, comme une fenêtre défilante, et peut également enregistrer de la vidéo.
C'est une application payante, mais il y a aussi un essai disponible.
Il existe une extension appelée Nimbus Screen Capture qui convient parfaitement à cette tâche.
Vous avez la possibilité de capturer:
- la partie visible de la page (utile pour ne pas inclure les éléments du navigateur par opposition à alt+Print Scrn)
- un fragment de la page (par lequel vous pouvez survoler des régions à l'écran afin de trouver le fragment souhaité - ces régions correspondent à leurs éléments HTML sous-jacents)
- zone sélectionnée (vous cliquez et faites glisser manuellement où vous voulez la capture d'écran, prend en charge le défilement tout en faisant glisser)
- la page entière
J'utilise Screenpresso . Il vous permet de prendre une capture d'écran avec défilement. En gros, vous prenez une capture d'écran, faites défiler l'écran et prenez-en une autre, etc., puis Screenpresso les assemble. Screenpresso est également gratuit.
Pour votre information, les touches de raccourci pour faire défiler la capture d'écran sont WindowsKey + Shift + PrintScreen. Vous devez ensuite cliquer sur la fenêtre que vous souhaitez faire défiler. Lorsque vous arrivez à la partie suivante de la capture d'écran, cliquez avec le bouton droit de la souris, faites défiler vers le bas, cliquez avec le bouton droit de la souris, etc. Lorsque vous avez terminé, faites un clic gauche et ils seront cousus ensemble. Assurez-vous que chaque capture d'écran se chevauche pour que le processus d'assemblage fonctionne mieux.
Options pour tout adapter sur une seule page:
- Utilisez
<Ctrl>-pour tout insérer sur une page - Faites pivoter votre écran en mode portrait
- Utilisez un deuxième écran en mode portrait et positionnez-le sous le premier.
- Combinez tout ce qui précède
Une autre option consiste à prendre une capture d'écran de la partie supérieure de ce que vous souhaitez capturer. Faites défiler vers le bas, prenez la prochaine capture d'écran. Répétez cette opération jusqu'à ce que vous ayez tout capturé.
Facultatif: combinez les captures d’écran en une seule grande image à l’aide d’un éditeur d’image (par exemple, Gimp).
Pour prendre des captures d'écran, vous pouvez ajouter une extension telle que capture d'écran facile. Il vous sera alors beaucoup plus facile de prendre des captures d’écran.
Pour les programmes DESKTOP, avec une fenêtre de défilement ApowerSoft Capture a fait le travail pour moi.