Comment faire des captures d'écran de pages Web à partir de la ligne de commande

Il existe de nombreuses situations dans lesquelles vous souhaiterez peut-être prendre des captures d'écran d'une page Web. Bien sûr, il existe des extensions de navigateur qui font le travail, mais si vous devez prendre des captures d'écran de nombreux sites Web afin de les archiver ou de les générer dans le cadre d'un processus automatisé, vous avez besoin d'un outil de ligne de commande. Voici quatre outils qui prennent des captures d'écran de pages Web à partir de la ligne de commande.

pageres-cli

Bien que ce ne soit pas aussi populaire que certains des autres outils les plus populaires, pageres-cli est de loin le meilleur outil pour prendre des captures d'écran. Basé sur PhantomJS et écrit en Node.js, il restitue avec précision même les pages Web les plus complexes.

Pour installer pageres-cli, vous devez d'abord installer Node.js et NPM. Ouvrez ensuite une fenêtre de terminal et installez-la comme suit :

sudo npm install -g pageres-cli

Après l'installation, faire des captures d'écran est un jeu d'enfant :

pageres google.com

Cela vous donnera une capture d'écran dans votre répertoire de travail actuel avec le nom google.com-1366x768.png qui, comme vous pouvez le voir, a une résolution de 1366 × 768 et un format PNG.

Vous pouvez spécifier votre propre nom de fichier, format et résolution. Considérez la commande suivante :

pageres google.com yahoo.com 1280x800 --format=jpg --filename="Pictures/<%= date %>_<%= url %>"

C'est une longue commande, alors décomposons-la pour vous :

• google.com et yahoo.com sont les URL dont les captures d'écran sont générées.
• 1280x800 indique la taille d'écran dans laquelle la capture d'écran est rendue.
• --format spécifie le format à utiliser. Dans ce cas, nous avons utilisé le format JPG.
• --filename Spécifie le répertoire dans lequel les captures d'écran sont enregistrées et le format dans lequel les fichiers sont nommés. Dans notre cas, nous avons précisé que vous devez vous rendre dans le répertoire "Images" et que les noms de fichiers doivent être la date suivie d'un trait de soulignement (_ ) et ensuite suivi de l'URL.

Vous pouvez même définir différents paramètres pour différents sites !

pageres [google.com 1280x800] [yahoo.com 800x600]

Finalement, vous constaterez peut-être que certains sites Web vous proposent des versions «Lite» ou «Mobile» de pages Web lors de l'utilisation de cet outil. Vous pouvez facilement modifier la chaîne de l'agent utilisateur pour qu'elle ressemble à un navigateur moderne :

pageres echo.opera.com --user-agent='Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0'

Une variété d'autres options sont disponibles; regardez cette page d'accueil du projet.

Renard de feu

Firefox 57 et les versions plus récentes ont un mode de capture d'écran en ligne de commande. Tout comme pageres-cli, Firefox capture avec précision les pages Web, mais il n'a pas beaucoup de fonctionnalités. Ce mode n'utilise pas d'environnement graphique, c'est pourquoi il est bien adapté à une utilisation sur des serveurs.

Pour prendre une capture d'écran avec Firefox, procédez comme suit :

firefox -screenshot google.png google.com

Cela prendra une capture d'écran pleine page du. créé google.com vers le fichier google.png . Firefox ne prend actuellement pas en charge la prise de captures d'écran dans d'autres formats. Si vous utilisez une autre extension, par ex. B. google.jpg , un fichier PNG portant ce nom sera créé.

Pour prendre une capture d'écran de taille limitée, utilisez le --window-size Paramètre. Par exemple, si vous souhaitez prendre une capture d'écran de taille 1366 × 768, procédez comme suit :

firefox -screenshot google.png google.com --window-size=1366,768

Les modules complémentaires installés dans Firefox affectent également la sortie; ce qui est assez pratique dans de nombreux cas. Par exemple, si vous installez une extension de blocage des publicités, elle supprimera également les publicités dans les captures d'écran.

Cutycapt

Bien que pageres-cli et Firefox soient excellents, ils ne conviennent pas à tout le monde. Heureusement, il existe d'autres outils comme Cutycapt. Il utilise la bibliothèque QtWebkit pour rendre les pages Web.

Vous pouvez l'installer avec Ubuntu et Debian sudo apt install cutycapt; sur d'autres systèmes, vous pouvez le compiler à partir des sources comme décrit sur leur page d'accueil.

Vous pouvez prendre une capture d'écran avec cutycapt comme ceci :

cutycapt --url=google.com --out=google.png

cutycapt essaiera de reconnaître le format du fichier de sortie à partir du nom du fichier. Les formats pris en charge incluent JPG, GIF, SVG et PNG.

Par défaut, Cutycapt génère des captures d'écran d'une largeur de 800 × 600. Vous pouvez contrôler la hauteur et la largeur de la capture d'écran comme suit :

cutycapt --url=google.com --out=google.png --min-width=1366 --min-height=768

Cela vous donnera une capture d'écran de la résolution 1366 × 768.

Jetez un œil à la page de manuel en tapant man cutycapt sur le terminal pour afficher une liste d'options.

Si vous rencontrez des problèmes avec les sites Web qui proposent des versions "Lite" ou "Mobile", fournissez une chaîne d'agent utilisateur similaire à un navigateur moderne :

cutycapt --url=... --out=... --user-agent='Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0'

Cependant, si vous essayez d'exécuter cutycapt sur une machine sans serveur X en cours d'exécution (comme la plupart des serveurs), cela échouera. Vous devez utiliser xvfb pour l'exécuter :

xvfb-run --server-args="-screen 0, 1024x768x24" cutycapt --url=... --out=...

Dans la commande ci-dessus, le --server-args Le paramètre crée simplement un tampon d'écran virtuel de taille 1024 × 768 avec une profondeur de couleur de 24 bits. Cela n'affecte pas la capture d'écran.

wkhtmltoimage

wkhtmltoimage, qui fait partie de wkhtmltopdf, est un autre outil pour générer des captures d'écran. Son éventail de fonctions est orienté vers la génération rapide et automatisée de captures d'écran; même si ce n'est pas mieux si vous voulez des détails.

Il devrait être disponible dans les dépôts de votre distribution. Sous Debian / Ubuntu vous l'obtenez avec sudo apt install wkhtmltopdf . S'il n'est pas disponible dans votre distribution, vous pouvez toujours utiliser les fichiers binaires précompilés ou le compiler à partir des sources.

Une mise en garde, cependant, si vous souhaitez exécuter wkhtmltoimage dans un environnement sans serveur X, vous devez obtenir le binaire précompilé - ceux des référentiels standard ne prennent souvent pas en charge l'exécution sans lui.

Pour installer les binaires précompilés, téléchargez la dernière archive pour votre système et procédez comme suit :

sudo tar -xf wkhtmltox-*.tar.xz -C /opt
sudo mkdir -p /usr/local/lib /usr/local/share/man/man1
sudo ln -s /opt/wkhtmltox/bin/wkhtmltoimage /usr/local/lib
sudo ln -s /opt/wkhtmltox/bin/wkhtmltopdf /usr/local/lib
sudo ln -s /opt/wkhtmltox/share/man/man1/wkhtmltoimage.1.gz /usr/local/share/man/man1
sudo ln -s /opt/wkhtmltox/share/man/man1/wkhtmltopdf.1.gz /usr/local/share/man/man1

Vous pouvez prendre des captures d'écran de pages Web en faisant :

wkhtmltoimage google.com google.jpg

La génération de captures d'écran JPG et PNG est prise en charge. Cependant, la taille des fichiers JPG générés est énorme

Vous pouvez définir une largeur et une hauteur personnalisées en spécifiant :

wkhtmltoimage --height 1200 --width 800 google.com google.png

Dans certains cas, la capture d'écran peut être plus large que celle indiquée. Vous pouvez résoudre ce problème en ajoutant le --disable-smart-width Drapeau.

Malheureusement, il n'existe aucun moyen fiable de modifier la chaîne de l'agent utilisateur. Plus précisément, vous pouvez utiliser le User-Agent En-tête HTTP, mais vous ne pouvez pas le modifier navigator.userAgent Valeur via JavaScript (JS). Cela étant dit, forger l'en-tête HTTP est tout ce dont vous avez besoin pour de nombreux cas d'utilisation. Vous pouvez le faire avec :

wkhtmltoimage --custom-header-propagation --custom-header User-Agent 'Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0' google.com google.jpg

le --custom-header-propagation Switch garantit que le User-Agent personnalisé En-tête HTTP pour obtenir toutes les ressources telles que les images, les fichiers JS et le contenu du cadre en ligne.

Parfois, lors de la prise de captures d'écran automatisées, vous voudrez peut-être voir à quoi ressemble la page sans le JS. Vous pouvez le faire en utilisant le --disable-javascript Compteur :

wkhtmltoimage --disable-javascript google.com google.jpg

Si vous avez beaucoup de captures d'écran à prendre, vous voudrez peut-être accélérer les choses en réduisant le temps d'exécution de JS. Le temps par défaut est de 200 millisecondes (ms), mais vous pouvez le diminuer ou l'augmenter. Par exemple, si vous souhaitez autoriser l'exécution de JS pendant 45 ms, utilisez :

wkhtmltoimage --javascript-delay 45 google.com google.jpg

Pour voir la gamme complète d'options disponibles, exécutez wkhtmltoimage --extended-help .

diplôme

Dans cet article, nous avons vu comment prendre des captures d'écran de pages Web à l'aide de divers outils, certains conçus pour la précision et d'autres pour la vitesse.