Как отобразить часть страницы с помощью PhantomJS?

Я хотел бы преобразовать отдельные элементы HTML в PNG с помощью Phantom.JS. Кто-нибудь знает возможно ли это? Кроме того, как мне использовать Phantom.js для отображения страницы, на которую уже смотрит пользователь?


person Dany Joumaa    schedule 11.08.2012    source источник


Ответы (5)


Чтобы отобразить только часть страницы, вам нужно установить атрибут clipRect для страницы, а затем отобразить ее.

var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
};
page.render('capture.png');

Я не понимаю вторую часть вашего вопроса. Phantom.js является безголовым, что означает, что на самом деле нет дисплея, на который смотрит пользователь.

person jasonlfunk    schedule 11.08.2012
comment
Я понимаю, что phantom.js безголовый. В частности, мне нужна его способность захватывать веб-страницу из того, что видно в окне просмотра браузера. Вы знаете способ сделать это? - person Dany Joumaa; 12.08.2012
comment
Хорошо, я понимаю, что ты имеешь в виду. Я точно не знаю, работает ли PhantomJS таким образом или нет. Я не знаю, есть ли у Phantom понятие области просмотра или что-то в этом роде. - person jasonlfunk; 13.08.2012
comment
Я понимаю. Я ищу какую-то структуру, которая делает это или какую-то функцию внутри API-интерфейса расширения Chrome, которая позволяет мне это делать. Если у вас есть какие-либо указатели, я был бы очень признателен. - person Dany Joumaa; 13.08.2012
comment
Что именно вы пытаетесь сделать? Есть ли какой-нибудь javascript, который прокручивается вниз, который вы пытаетесь протестировать? Если вы пытаетесь имитировать взаимодействие с пользователем, то вы можете использовать подход, упомянутый выше, для визуализации любой части страницы и имитации прокрутки путем настройки атрибута top. - person jasonlfunk; 14.08.2012
comment
Я пытаюсь захватить каждый элемент HTML на странице и экспортировать PNG для целей отладки. Единственные известные мне API позволяют мне делать скриншот области просмотра браузера, но не поддерживают захват отдельных элементов или конкретных прямоугольников. - person Dany Joumaa; 14.08.2012
comment
О, я понимаю. Вы ищете реализацию этого браузера, а не безголовый вариант на стороне сервера. - person jasonlfunk; 14.08.2012
comment
Мне жаль. Я ничего не знаю. - person jasonlfunk; 14.08.2012
comment
Приведенный выше пример нуждался в var clipRect = page.evaluate(function () { return document.querySelector("#someid").getBoundingClientRect(); });, когда я пытался. Функция оценки оценивает документ в контексте страницы. - person unhammer; 11.09.2012
comment
Если я заранее знаю размер изображения, которое я пытаюсь захватить, даже если я установлю для clipRect значение {top: 0, left: 0, width: 300, height: 250}, PhantomJS отобразит большее изображение (избыток — просто черный #000 пикселей). Что дает? Существует ли минимальный размер изображения, который может отображать PhantomJS? - person bigp; 29.09.2016
comment
^ (продолжить) используется экспорт в JPEG. ПНГ вроде нормально. - person bigp; 29.09.2016

Рабочий пример.

var page = require('webpage').create();

page.open('http://google.com', function() {
  // being the actual size of the headless browser
  page.viewportSize = { width: 1440, height: 900 };

  var clipRect = page.evaluate(function(){
    return document.querySelector('#hplogo').getBoundingClientRect();
  });

  page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
  };

  page.render('google.png');
  phantom.exit();
});
person mgrachev    schedule 10.07.2015

Вы можете использовать CasperJS, еще один проект, основанный на PhantomJS.

casper.start('http://www.weather.com/', function() {
    this.captureSelector('weather.png', '#wx-main');
});

casper.run();
person Silvio Lucena Junior    schedule 08.05.2014

Решение ниже работает для меня.

    var clipRect = document.querySelector(selector).getBoundingClientRect();
     page.clipRect = {
              top:    clipRect.top,
              left:   clipRect.left,
              width:  clipRect.width,
              height: clipRect.height
      };
   page.render('capture.png');

Но я заметил, что это работает, только если мы визуализируем изображение, а не PDF. Чтобы обойти это для pdf, попробуйте это

page.evaluate(function (element){
    $(element).appendTo('body');
    $('body > :not(' + element + ')').hide(); 
   }, element);       
  });

window.setTimeout(function(){
    page.render("page.pdf");
  },1000);

Эти ссылки могут помочь: Как скрыть все элементы, кроме одного, с помощью jquery ?

https://github.com/ariya/phantomjs/issues/10465

person onlyme    schedule 27.04.2016

У меня была такая же потребность, я попробовал это, и у меня это сработало:

не забудьте http://www в URL

var page = require('webpage').create();
page.open('YourPageURL', function (status) {

if (status !== 'success') {
    console.log('Network Problem');
} else {
    var p = page.evaluate(function () {
        return document.getElementById('yourDivID').innerHTML
    });
    console.log(p);
}
phantom.exit();
});
person ZinebM    schedule 19.03.2013
comment
Проголосовал против, потому что это фактически не сохраняет скриншоты отдельных элементов HTML в PNG, как указано в вопросе. Он просто выводит внутренний HTML-код некоторого элемента на консоль. - person Val Redchenko; 05.06.2013