Phantomjs-сделать скриншот веб-страницы

У меня есть URL (например,http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4) и хотите, чтобы сделать снимок и просмотреть его на моей веб-странице. Это означает, что пользователь нажимает кнопку предварительного просмотра, и PhantomJS должен просмотреть веб-страницу как PNG / JPEG

Я в порядке с использованием любого другого открытого исходного кода.

22
frontend javascript jquery phantomjs

2 ответов

Я собираюсь предположить, что вы установили Phantomjs и создали псевдоним в своем .bashrc или обновили системный путь для вызова двоичных файлов Phantomjs. Если нет, вам нужно ознакомиться с несколькими учебниками для начинающих: http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

Как только вы это настроите, вам нужно будет написать простой файл javascript, который вы вызовете в терминале (или оболочке, если вы используете Windows). Я буду приведите простой пример сценария ниже.

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

затем сохраните файл js. Откройте терминал или консоль и выполните следующие

phantomjs yourFile.js

вот именно. Проверьте каталог, в котором вы вызвали файл js, и у вас должен быть файл png с скриншотом вашей веб-страницы.

Это очень просто, и есть много предостережений для f-ing с phantomjs, но это примерно так же просто, как я могу это сделать. Если вам нужны другие рецепты для phantomjs, попробуйте посмотреть эти примеры скриптов: https://github.com/ariya/phantomjs/wiki/Examples

32

приведенный выше ответ подходит для базового использования, но PhantomJS не знает, были ли загружены все запросы AJAX или нет. Я сделал url-to-image, чтобы помочь с этой проблемой.

  1. npm install url-to-image

  2. записать скриншот.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. выполнить скрипт node screenshot.js
12