Comment prendre une capture d'écran qui inclut un élément de défilement dans une page Web dans Firefox?

70

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.

RockPaperLizard
la source
2
Avez-vous déjà envisagé d’enregistrer la page au format PDF? Le problème avec cette méthode est que certains sites Web ont une “vue imprimée” qui est ce que le PDF va contenir, mais dans certains cas, cette technique peut fonctionner.
JakeGould
@JakeGould Merci Jake. Cela fonctionnerait-il pour faire défiler et élément dans une page?
RockPaperLizard
Welp, raté la partie sur l'élément de défilement. C’est trop idiosyncratique pour que je puisse commenter, alors tout ce que je peux dire, c’est que je ne peux pas être sûr maintenant que la méthode d’impression PDF fonctionnera. Bonne chance avec d'autres idées présentées ici.
JakeGould
Si je comprends bien, l'élément de défilement en question est probablement forcé à une hauteur inférieure à sa hauteur maximale. Définir l'attribut style de hauteur à auto sur cet élément peut aider.
Tehwalris

Réponses:

86

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

entrez la description de l'image ici

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 ...

entrez la description de l'image ici

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.

calembour
la source
Merci beaucoup pour votre réponse (et bonne image!), Mais malheureusement cela ne répond pas à la question. Je dois prendre une capture d'écran de la page entière, y compris l'élément, et pas seulement de l'élément lui-même.
RockPaperLizard
5
La réponse de @RockPaperLizard en fait le jeu de mots ne répond PAS à votre question ... il ne l'a tout simplement pas appliquée à votre cas d'utilisation. Vous pouvez suivre sa réponse, mais sélectionnez l' <body>élément et il vous donnera la capture d'écran souhaitée.
Numérique Chris
2
Si vous modifiez la hauteur de l'élément DOM pour qu'il n'y ait pas de barres de défilement internes, utilisez FireShot pour capturer la page entière, cela devrait fonctionner.
J'ai pu obtenir une capture d'écran comme celle-ci, mais pas plus. Il produit toujours le son de l'obturateur de l'appareil photo et ne place rien dans le presse-papiers. Il en va de même pour la commande dans la barre d’outils développeur, aucun fichier n’est créé.
MrFox
@MrFox Un fichier png est créé dans le dossier Téléchargements.
AxiomaticNexus
24

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

entrez la description de l'image ici

topher
la source
4
@RockPaperLizard J'ai trouvé un autre poste avec la même réponse et OP a été édité par vous.
Jeu de mots
@pun Merci. Mais je dois prendre une capture d'écran de la page entière avec l'élément développé, pas seulement de l'élément lui-même.
RockPaperLizard
J'ai pu obtenir une capture d'écran comme celle-ci, mais pas plus. Il produit toujours le son de l'obturateur de l'appareil photo, mais pas le fichier. Il en va de même pour cliquer avec le bouton droit sur l'élément en mode développeur et le copier de cette manière. Aucune image n'est envoyée au presse-papiers.
MrFox
8

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).

Ouroborus
la source
4

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.

Gurumurthy.G
la source
si vous trouvez cela comme réponse, marquez-le et postez-le dans le commentaire. Qu'est-ce que cela signifie?
AL le
J'ai utilisé SnagIt pendant des années. C'est un logiciel très utile.
Roy Tinker
2

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.

garethb
la source
1

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

nimbus

Keith Hall
la source
Merci pour votre réponse, je l'apprécie. Malheureusement, il ne semble pas que Nimbus Screen Capture puisse capturer l'intégralité du contenu d'un élément défilant au sein d'une page. Si je me trompe, pourriez-vous fournir plus de détails sur la manière de réaliser cela avec cet outil?
RockPaperLizard
@RockPaperLizard vous avez raison, cela ne semble pas supporter cela. J'avais pensé que le mode fragment couvrirait les éléments défilants, ou que le mode zone sélectionné fonctionnerait, mais, bien que la fenêtre puisse défiler dans ce mode, il semble que les éléments de défilement ne peuvent pas.
Keith Hall
Merci d'avoir confirmé que je ne le voyais pas. Peut-être vont-ils ajouter cette fonctionnalité à une future version.
RockPaperLizard
0

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).

NZD
la source
1
Jusqu'au point 4, je pensais que vous ne proposiez que de combiner tous les éléments! J'imaginais avoir 20 écrans et les empiler les uns sur les autres ... LOL. Ensuite, je suis arrivé au numéro 4 et j'ai appris que vous vouliez dire que les articles devaient être utilisés individuellement ou combinés.
RockPaperLizard
Mais si vous effectuez un zoom arrière sur la page, il est impossible de la réduire sans distorsion.
NiCk Newman
0

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.

utilisateur606374
la source