Voici un outil en ligne de commande intéressant qui permet d’automatiser la capture écran de sites web. Shot Scraper permet ainsi d’immortaliser ce qui se trouve sur une page web.

Mais l’outil ne s’arrête pas là puisqu’il offre de nombreuses options pour ajuster la taille de l’image, ou capturer uniquement une zone spécifique de la page en se reposant sur des sélecteurs CSS.

shot-scraper https://korben.info/
shot-scraper https://korben.info/ -o small.png --width 400 --height 800
shot-scraper https://korben.info/ -s '#main'

L’outil est parfaitement capable de capture des sites qui nécessite une authentification et peut également utiliser du Javascript dans les pages avant la capture, ce qui permet de récupérer uniquement le contenu texte retourné.

shot-scraper javascript https://siteweb.com/ "({
  title: document.title,
  tagline: document.querySelector('.tagline').innerText
})"

Les sorties peuvent se faire en PNG ou JPG et une option Retina permet de doubler la résolution d’une image si besoin. Shot-Scraper vous permet même d’interagir avec la page avant de faire la capture écran, histoire d’avoir exactement ce que vous voulez à l’écran.

Pour installer shot-scraper :

pip install shot-scraper
shot-scraper install

Shot-Scraper est conçu pour fonctionner avec Chromium mais vous pouvez également l’utiliser avec Firefox ou Webkit (le moteur de Safari) comme ceci :

shot-scraper install -b firefox

A découvrir d’urgence ici + la doc ici .

MacOS embarque nativement un outil pour faire des captures écrans, soit d’une zone définie, soit de l’intégralité de l’écran. Pour cela, il suffit d’utiliser les raccourcis claviers :

• CMD + MAJ + 3
• CMD + MAJ + 4

Mais si vous avez besoin d’aller plus loin avec un outil plus précis, je vous invite à télécharger Shottr.

Shottr se lance automatiquement au démarrage de votre ordinateur et après une petite configuration qui consiste à lui donner quelques permissions et à désactiver les raccourcis systèmes de capture écran, vous deviendrez le boss de la capture écran.

Ainsi, Shottr vous permettra de faire des captures plein écran, des captures de zone mais également de fenêtres avec une personnalisation du fond (wallpaper, transparent, couleur unie…etc), ce qui est très cool pour avoir un truc plutôt propre.

Vous pouvez également choisir l’action qui se déroulera après votre capture écran. A savoir sauvegarder celle-ci, l’ouvrir dans l’éditeur de Shottr ou afficher une petite vignette avec différentes actions (sauvegarde, édition, upload…etc, de quoi avoir le choix).

Shottr embarque également un module d’OCR qui permet de récupérer le texte de la zone que vous avez capturée. Génial pour reprendre un bout de texte à partir d’un fichier où le copier coller n’est pas possible.

L’éditeur vous permettra également de mettre des flèches, du texte, de récupérer les couleurs avec une pipette mais surtout de flouter rapidement ou d’effacer des éléments. Shottr vous permettra aussi de mesurer en pixel l’espacement entre les éléments ou leur taille et d’afficher ça sur la capture. Ca permet aux développeurs frontend de faire le point sur les maquettes par exemple.

Je vous laisse avec la vidéo qui vous en montrera un peu plus.

Shottr vous fera gagner un max de temps avec toutes vos captures et vous pouvez le télécharger ici .