web-dev-qa-db-fra.com

Phantomjs - prendre une capture d'écran d'une page Web

J'ai une URL (par exemple, http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4) et je veux en faire une capture d'écran et la prévisualiser sur ma page Web. Cela signifie que l'utilisateur clique sur le bouton d'aperçu et PhantomJS doit prévisualiser la page Web au format PNG/JPEG

Je suis d'accord avec l'utilisation de tout autre open source.

javascriptjqueryphantomjsfrontend
23
Abhiram Sampath

Je vais supposer que vous avez installé Phantomjs et avez créé un alias dans votre .bashrc ou avez mis à jour votre chemin système pour appeler les binaires Phantomjs. Sinon, vous devez parcourir quelques tutoriels pour débutants: http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

Une fois que vous avez configuré cela, vous devrez écrire un simple fichier javascript que vous appellerez dans le terminal (ou Shell, si vous utilisez Windows). Je vais fournir un exemple de script simple ci-dessous.

var WebPage = require('webpage');
page = WebPage.create();
page.open('http://google.com');
page.onLoadFinished = function() {
   page.render('googleScreenShot' + '.png');
   phantom.exit();}

Ensuite, enregistrez votre fichier js. Ouvrez votre terminal ou Shell et exécutez ce qui suit

phantomjs yourFile.js

C'est ça. Vérifiez le répertoire où vous avez appelé le fichier js et vous devriez avoir un fichier png avec une capture d'écran de votre page Web.

C'est très simple et il y a beaucoup de mises en garde à propos des phantomjs, mais c'est à peu près aussi basique que possible. Si vous avez besoin d'autres recettes pour phantomjs, essayez de regarder ces exemples de scripts: https://github.com/ariya/phantomjs/wiki/Examples

32
cliffbarnes

La réponse ci-dessus est correcte pour une utilisation de base, mais PhantomJS ne sait pas si toutes les requêtes AJAX ont été chargées ou non. J'ai fait rl-to-image pour aider à ce problème.

  1. npm install url-to-image

  2. Écrivez screenshot.js

    var screenshot = require('url-to-image');
screenshot('http://google.com', 'google.png').done(function() {
    console.log('http://google.com screenshot saved to google.png');
});
  3. Script de lancement node screenshot.js
12
Kimmo