Comment puis-je prendre des captures d'écran du navigateur à une résolution supérieure à celle supportée par mon navigateur?

97

Je dois prendre une capture d'écran d'un site Web tel qu'il apparaîtrait sur un moniteur à très haute résolution ... disons 4000x3000 pixels. L'écran de mon ordinateur portable a une résolution native de 1400x768. Fondamentalement, je dois simuler une résolution d'écran beaucoup plus élevée que celle que mon moniteur et ma carte vidéo prennent en charge. Je veux que la capture d'écran du site ressemble beaucoup à ce que vous faites lorsque vous appuyez sur CTRL MINUS (zoom arrière) dans Firefox à plusieurs reprises, mais sans perte de pixels en raison de la mise à l'échelle. Comment puis-je faire ceci? Existe-t-il un moyen d'utiliser un logiciel de machine virtuelle pour simuler un affichage de résolution très élevée? Sinon, y a-t-il moyen d'ouvrir une fenêtre de navigateur plus grande que l'écran, puis de capturer son contenu au format PNG? Quelque chose d'autre qui pourrait fonctionner?

Joshua Carmody
la source
Vous pouvez essayer de changer le paramètre dpi de votre système d'exploitation. Je crois que dans Windows 8, il faut modifier une valeur de registre. Bien que cela vous donne un bureau gigantesque, les polices s’adaptent également et vous devez donc vous fatiguer les yeux pour lire le texte.
Jiggunjer

Réponses:

104

Vous pouvez le faire avec Firefox et 2 extensions: Web Developer et FireShot .

Une fois les deux extensions installées, allez dans Outils - Développeur Web - Redimensionner - Éditer Redimensionner les dimensions ....

Ajoutez une nouvelle taille, 4000 x 3000. Cochez la case "Redimensionner la fenêtre" si vous souhaitez que le contenu de la page soit au format 4000x3000. Si vous ne cochez pas cette case, la fenêtre complète de Firefox (avec barres d'outils, menu, ...) sera définie sur cette dimension.

texte alternatif

Une fois à la bonne taille, allez dans Outils - FireShot - Capturer la page entière et .... Sélectionnez une action, telle que Enregistrer par exemple. Le contenu de la page défini par Web Developer sera enregistré à la taille souhaitée.

texte alternatif

Snark
la source
@ Snark - Eh bien, cela a presque fonctionné. Mais il semble que l'extension Web Developer ne me permette pas de rendre la fenêtre d'affichage plus grande que mon écran ...?
Joshua Carmody
@ Josué: cela fonctionne bien pour moi. J'ai testé avant de poster ma réponse. J'ai fait un nouveau test mais je n'ai pas pu trouver où héberger une image de cette taille
Snark
1
Mise à jour: le problème ne peut pas faire une fenêtre plus grande que l'écran semble être une limitation imposée par le système d'exploitation Windows lui-même.
Joshua Carmody
@snark - Est-ce que ça vous dérange si je vous demande quel système d'exploitation vous utilisez?
Joshua Carmody
2
@ Snark - Ah. Peut-être que c'est une chose Windows XP (c'est ce que je suis coincé avec ici). Dans tous les cas, je peux contourner ce problème en utilisant FireBug pour insérer une DIV avec style = "width: 4000px; height: 3000px;" dans le code HTML, puis en utilisant FireShot, donc je suis toujours bon. Merci d'avoir signalé FireShot. Cela me rend la vie beaucoup plus facile. Je faisais défiler et prendre des screenshots que de les composer manuellement auparavant. C'était une douleur majeure.
Joshua Carmody
19

Pendant ce temps (pendant au moins un an ou deux - depuis la version 15, si je ne me trompe pas), Firefox le prend en charge directement via les outils de développement intégrés.

Soit frappé CtrlShift Mou sélectionnez View Responsive Design de la Developer Tools icône dans le menu de bande.

Cela affichera cette vue, qui vous permettra de choisir parmi un ensemble de préréglages, d'entrer la résolution souhaitée et d' enregistrer directement une capture d'écran au format PNG sur le disque en un clic:

entrez la description de l'image ici

Damon
la source
1
Le bouton de capture d'écran risque de ne pas fonctionner correctement lorsque vous simulez des images haute résolution en effectuant un zoom avant. Dans ce cas, ouvrez la barre d'outils de développeur Shift+ F2et collez-le screenshot --clipboard --fullpagedans la "console". Ceci est différent de la console JS classique.
lame
Cela fonctionne également avec le mode de test du périphérique de la console de développeur Chrome. L'option de capture d'écran est dans le menu déroulant en haut à droite.
Tully
Malheureusement, cela ne semble pas fonctionner dans Chrome. J'ai juste essayé de prendre une capture d'écran complète de la fenêtre d'affichage dans Chrome d'un flux Microsoft Flow (le flux ne s'affichant pas correctement dans Firefox, bien que la méthode de capture d'écran complète de Firefox fonctionne) et il n'a fallu qu'une capture d'écran de l'espace actuellement visualisé. ... en d'autres termes, il n'y avait pas de différence entre les options de "capture d'écran" et de "capture d'écran en taille réelle" de Chrome ... bummer.
TylerH
6

J'utilise un add-on FireFox appelé Abduction pour créer une image .png d'une page Web dans son intégralité. Malheureusement, cet ajout n'a pas encore été mis à jour pour être compatible avec FireFox 3.6.

On dirait que ScreenGrab fera la même chose.

Zooks64
la source
5

Firefox 16 et les versions ultérieures permettent désormais de contrôler la taille de la fenêtre d'affichage à l'aide de la console de développement:

Ouvrez les outils ... Web Developer ... Developer Toolbar

Redimensionner la fenêtre avec cette commande:

resize to 5000 5000

Capture d'écran avec cette commande:

screenshot output.png
Wayne Piekarski
la source
4

Eh bien, avec un système Linux (ou une configuration de système X Window quelconque), vous pouvez définir un bureau virtuel plus grand que votre moniteur. Vous faites défiler, mais je pense que vous pourriez alors maximiser votre navigateur et la capture d'écran.

Je ne sais pas s'il existe un moyen de le faire sous Windows ou OS X.

Ronald Pottol
la source
3

Je trouve l’utilisation de services en ligne comme thumbalizr plus facile que l’installation de plug-ins de navigateur, si vous n’avez pas besoin de le faire souvent.

svick
la source
1

Dans Chrome, il existe plusieurs extensions telles que:

Il y a une autre capture d'écran de la page Web mais je n'ai pas assez de réputation pour publier plus de deux liens

titusfx
la source