Screenshot de pages web

Avec PhantomJS , il est possible de prendre des screen en ligne de commande

Voici un sujet qui plus est on ne peut plus intéressant et intriguant, celui-ci déborde d'informations sur internet et pour un développeur web il est indispensable pour lui de connaître les avantages et les inconvénients de la prise de captures d'écran de pages web avec la ligne de commande. La prise de captures d'écran est d'une utilité dans une multitudes de domaines, le référencement et l'indexation de contenu, la fabrication d'archives, la veille technologique, la sécurité etc...  Tout d'abord il faudra définir les objectifs de votre application, savoir pour quel usage vous souhaitez utiliser la ressource des screenshot.Il va falloir répondre  à ces questions afin d'éviter une perte de temps.

  • Sur quel système  souhaitez vous travailler?
  • Votre application nécessite-t-elle le javascript ?
  • Souhaitez vous faire une API ?
  • Avez vous un serveur VPS , si oui quel technologies comptez vous utiliser ?
  • Souhaitez vous l'affichage de caractères spéciaux sur l'affichage des screenshots ?
  • Disposez vous d'un serveur qui est dédié à cette tâche ?

Le choix de l'environnement dans lequel vous souhaitez travailler est important, si l'on souhaites utiliser une application qui permet de faire des screenshot de pages web sur windows ou linux l'application n'est pas tout le temps la même. Mon environnement est un serveur centOS basé sur linux qui ne doit pas utiliser d'interface graphique trop gourmande en ressources pour prendre des screenshot, car  aprés avoir constater une hausse de ressources due a l'utilisation d'interface graphique trop gourmande tel que gnome ou xvnc en utilisant la commande pv, j'avais une augmentation de 15 à 20% d'utilisation de CPU supplémentaire. Si on imagine le temps de fabrication d'un screenshot réduit à 2 secondes il suffirait de moins de 10 requêtes d' utilisateurs dans cet intervalle de temps pour faire surchauffer le VPS. Sur linux le serveur X , aussi appelé Xorg est celui qui sert à exécuter l'interface graphique, c'est le minimum requis pour afficher le contenu d'une page web. Dans le serveur X sont distribuées plusieurs instances d'affichage appelées Display, ou screen (on retrouve aussi l'option display sur firefox en ligne de commande). J'ai déja essayé avec succès HTML2CANVAS, auparavant, une lib en javascript qui permet la génération de screenshot du coté client , trés utile , mais hélas elle ne convient pas à ce que je veux. L'inconvénient de html2canvas est que le screenshot est généré par l'utilisateur et pas le serveur, et à l'aire des smartphones et des objets connectés il existe bien plus de problèmes de ralentissement du coté du client que du coté serveur,  HTML2CANVAS permet aussi d'utiliser le data protocol scheme(modèle de protocole data) qui  par la suite de quelques lignes de codes en js peut envoyé des images au format BLOB dans une base de donnée,qui la plupart du temps sera une base de donnée nosql. J'aurai essayé aussi quelque commandes interne avec ImageMagick (import et xwd), Xvfb,scrot,shutter, mais rien n'y fait , même si le temps d'enregistrement de la capture d'écran de page web est réduit il existe des inconvénients liés à la résolution des pages web. Tout de même voici des liens par ici.

C'est alors que j'ai trouvé phantomJS  un outil en ligne de commande écrit en C++, il utilise javascript et est compatible sur tout les serveurs Linux et Windows. PhantomJS détient sa propre version de serveur X et permet de rajouter des options trés facilement. Il supporte les cookies, ce qui  est très dangereux en soit, il  est simple à installer, je ne détaillerais pas les astuces d'installations dans cet article car le web regorge déjà d'informations sur ce sujet.

Voici comment il s'utilise :

phantomjs shot.js http://votresiteweb.tld  /destination/dufichierpng 800 600

Pensez à remplacer votresiteweb.tld par le site web que vous souhaitez capturé et /destination/dufichierpng par la destination du fichier png.

Voici le code source de shot.js

var system = require( 'system' ),
webpage = require( 'webpage' ),
page = webpage.create(),
url = system.args[ 1 ] || 'http://thibautlombard.space/index2.html',
path = system.args[ 2 ] || './',
width = +system.args[ 3 ] || 800,
height = +system.args[ 4 ] || 600;
//désactiver le mode verbose pour augmenter la rapidité
//page.onError = function ( msg ) {
//system.stderr.writeLine( 'Erreur:' + msg );
//};
//page.onConsoleMessage = function( msg, lineNum, sourceId ) {
//system.stdout.writeLine( 'CONSOLE: ' + msg, lineNum, sourceId );
//};
page.viewportSize = {
height : height,
width : width
};
page.clipRect = {
height : height,
width : width
};
page.open( url, function( status ) {
console.log( 'Status: ' + status );
window.setTimeout( function() {
var today=new Date();
var jour=today.getDate();
var mois=today.getMonth();
var annee=today.getFullYear();
var imgPath = path + jour + '_' + mois + '_' + annee + '-' + width + 'x' + height +'.png';
console.log( 'Rendering ' + imgPath );
page.render( imgPath );
phantom.exit();
}, 100 );
} );