Question Comment faire 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 un tableau à une seule colonne qui possède 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 pages Web longues qui défilent, il est trivial d'effectuer 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 toute la page, pas seulement l'élément lui-même.

Je voudrais accomplir ceci en utilisant Firefox sous Windows.


65
2018-06-13 06:28


origine


Avez-vous déjà pensé à enregistrer la page en format PDF? Le piège de cette méthode est que certains sites Web ont une "vue d'impression", ce que contient le PDF, mais dans certains cas, cette technique peut fonctionner. - JakeGould
@JakeGould Merci Jake. Est-ce que cela fonctionnerait pour faire défiler et élément dans une page? - RockPaperLizard
Welp, a manqué la partie sur l'élément de défilement. C'est trop idiosyncratique pour que je puisse commenter, 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 les autres idées présentées ici. - JakeGould
Peut-être utile: Plugin Firefox pour enregistrer la page complète rendue comme image sur Recommandations du logiciel. - Michael Kjörling
Si je comprends bien, l'élément de défilement en question est probablement forcé à moins que sa pleine hauteur. Définir l'attribut de style de hauteur sur auto sur cet élément peut aider. - tehwalris


Réponses:


Ma suggestion est d'utiliser le Fonctionnalité intégrée de Firefox cela vous permet de prendre des captures d'écran d'un seul élément DOM.

Ouvrez simplement les outils de développement → Rechercher l'élément → Clic droit et prenez la capture d'écran

enter image description here

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 les OP Modifier:

Si vous avez l'intention d'enregistrer une page complète avec tout le contenu de l'élément DOM, comme indiqué ci-dessous, vous devez éditer en direct la hauteur de l'élément DOM mais...

enter image description here

Il va pousser beaucoup d'éléments DOM hors de viewport et de screenshot ou AFAIK n'importe quel autre outil ne le capturera pas, ce qui, à mon avis, bat le but.

Lire ci-dessous de https://en.wikipedia.org/wiki/Screenshot

Une capture d'écran, une capture d'écran, un capuchon d'écran, un capuchon, un vidage d'écran ou   screengrab est une image prise par une personne pour enregistrer le visible   éléments affichés sur le moniteur, la télévision ou une autre sortie visuelle   appareil en cours d'utilisation.

Si je devais vraiment le faire à ma façon, je créerais un GIF ou prendrais deux captures d'écran d'une page entière et d'autres éléments de DOM uniquement pour les fusionner.


82
2018-06-13 07:18



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, pas seulement de l'élément lui-même. - RockPaperLizard
@RockPaperLizard En fait, la réponse de @pots répond à votre question ... il ne l'a tout simplement pas appliquée à votre cas d'utilisation. Vous pouvez suivre sa réponse mais sélectionnez la <body> élément et il vous donnera la capture d'écran souhaitée. - Digital Chris
Si vous modifiez la hauteur de l'élément DOM afin qu'il n'y ait pas de barre de défilement interne, utilisez FireShot pour capturer la page entière.
J'ai pu obtenir une capture d'écran comme celle-ci, mais pas plus. Il produit toujours le son de l'obturateur de la caméra, ne met rien dans le presse-papiers. Même chose pour la commande dans la barre d'outils du développeur, aucun fichier n'est créé. - MrFox


Vous pouvez utiliser la commande de capture d'écran de la barre d'outils Developer:

  1. presse Décalage + F2 pour ouvrir la barre d'outils ou sélectionnez-la dans le menu Outils de développement Web.

  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 le drapeau --selector, par ex.

screenshot --selector #hot-network-questions

vous obtiendrez l'image ci-dessous

enter image description here


24
2018-06-13 07:54



@RockPaperLizard j'ai trouvé un autre post avec la même réponse et OP a été édité par vous. - pun
@pun Merci Mais je dois faire une capture d'écran de la page entière avec l'élément étendu, pas seulement 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 la caméra, mais pas le fichier. Il en va de même pour un clic droit sur l'élément en mode développeur et pour le copier de cette manière. Aucune image n'est envoyée au presse-papiers. - MrFox


Utilisez Firefox Mode de conception réactif, définissez la largeur à quelque chose de normal et la hauteur telle qu'il soit suffisant pour englober la page entière, cliquez sur le bouton de capture d'écran (l'icône de la caméra).


8
2018-06-13 06:51





Il y a un logiciel appelé Snagit cela peut résoudre votre problème. Ce logiciel peut prendre la capture d'écran dans différents types, comme une fenêtre de défilement et peut également enregistrer de la vidéo.

C'est une application payante, mais un essai est également disponible.


4
2018-06-13 07:26



si vous trouvez cela comme une réponse, marquez-le et publiez-le dans un commentaire Qu'est-ce que ça veut dire? - A.L
@AL Cet utilisateur n'a pas assez de rep pour un commentaire, il a donc fourni une réponse dans l'espoir qu'il soit converti en un commentaire par un modérateur. - MonkeyZeus
J'ai utilisé SnagIt pendant des années. C'est un logiciel très utile. - Roy Tinker


j'utilise Screenpresso. Il vous permet de prendre une capture d'écran défilante. Fondamentalement, vous faites une capture d'écran, faites défiler vers le bas et prenez un autre et ainsi de suite, puis Screenpresso les assemble. Screenpresso est également gratuit.

FYI, 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, faites défiler vers le bas, cliquez avec le bouton droit de la souris, etc. Lorsque vous avez terminé, cliquez sur le bouton gauche et ils seront assemblés. Assurez-vous d'obtenir un chevauchement sur chaque capture d'écran afin que le processus d'assemblage fonctionne mieux.


2
2018-06-14 00:10





Il y a un extension appelé Capture d'écran Nimbus ce qui est parfaitement adapté à 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 plutôt que alt+Imprimer Scrn)
  • un fragment de la page (grâce auquel vous pouvez survoler les régions à l'écran pour trouver le fragment que vous souhaitez - ces régions correspondent aux éléments HTML sous-jacents)
  • zone sélectionnée (vous cliquez et faites glisser manuellement à l'endroit où vous voulez la capture d'écran, supporte le défilement en faisant glisser)
  • la page entière

nimbus


1
2018-06-14 12:05



Merci pour votre réponse, je l'apprécie. Malheureusement, il ne semble pas que Nimbus Screen Capture puisse capturer tout le contenu d'un défilement élément dans une page. Si je me trompe, pourriez-vous fournir plus de détails sur la façon d’y parvenir 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 de défilement, ou que le mode de zone sélectionné fonctionnerait mais, alors que la fenêtre peut 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 qu'ils vont ajouter cette fonctionnalité à une future version. - RockPaperLizard


Options pour tout adapter sur une seule page:

  • Utilisation <Ctrl>- pour tout adapter sur une seule page
  • Faites pivoter votre écran en mode portrait
  • Utilisez un deuxième écran en mode portrait et localisez-le en dessous du 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é.
En option: combinez les captures d'écran en une seule grande image à l'aide d'un éditeur d'image (par exemple, gimp).


0
2018-06-13 06:42



Jusqu'à ce que je suis arrivé à l'article n ° 4, je pensais que vous étiez seulement suggérant de combiner tous les articles! J'imaginais avoir 20 écrans et les empiler les uns sur les autres ... LOL. Puis je suis arrivé à # 4, et j'ai appris que vous vouliez dire les articles à utiliser individuellement ou combiné. - RockPaperLizard
Mais si vous effectuez un zoom arrière sur la page, il est impossible de la redimensionner sans distorsion. - NiCk Newman


Pour prendre des captures d'écran, vous pouvez ajouter une extension comme une capture d'écran facile. Ensuite, il vous sera beaucoup plus facile de faire des captures d'écran.


0
2018-06-15 05:53