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 souhaitez 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, mais ...

Il va écarter de nombreux éléments du DOM de la fenêtre d'affichage et de la capture d'écran ou, autant que je sache, aucun autre outil ne le capturera, ce qui va à l'encontre de votre objectif, je pense.

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, la télévision 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:

1. Appuyez sur Shift+ F2pour ouvrir la barre d’outils ou sélectionnez-la dans le menu Outils de Web Developer.

2. 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 le mode de conception réactif de Firefox , définissez la largeur sur quelque chose de normal et la hauteur suffisante pour englober toute la page, cliquez sur le bouton de capture d'écran (l'icône de la 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 aussi enregistrer de la vidéo.

Il s’agit d’une application payante, mais un essai est également disponible.

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.

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

Options pour tout adapter sur une seule page:

• Utilisez <Ctrl>-pour tout adapter sur une seule 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 la fenêtre de défilement, la capture d’ApowerSoft a fait le travail pour moi.