如何使用PhantomJS渲染页面的一部分？

Question

我想使用Phantom.JS将单独的HTML元素呈现为PNG。有人知道这是否可能吗？另外，我要如何使用Phantom.js呈现用户已经查看的页面？

- Dany Joumaa

Answer 1

要仅呈现页面的一部分，您需要为页面设置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是无界面的，这意味着没有实际的显示供用户查看。

- jasonlfunk

---

我明白了。我正在寻找一种能够实现这个功能的框架，或者是 Chrome 扩展 API 中允许我这样做的某些函数。如果您有任何指导意见，我将不胜感激。 - Dany Joumaa

你到底想做什么？你是在尝试测试一些滚动的 JavaScript 吗？如果你想模拟用户交互，那么你可以使用我上面提到的方法来渲染页面的任何部分，并通过调整“top”属性来模拟滚动。 - jasonlfunk

我试图捕获页面上的每个HTML元素并导出PNG以进行调试。我所知道的唯一API只允许我拍摄浏览器视口的截屏，但不支持捕获单个元素或特定矩形区域。 - Dany Joumaa

对不起，我不知道任何东西。 - jasonlfunk

在我尝试的时候，上述示例需要使用var clipRect = page.evaluate(function () { return document.querySelector("#someid").getBoundingClientRect(); });。 evaluate()函数是在页面上下文中执行文档评估。 - unhammer

Answer 2

工作示例。

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();
});

- mgrachev

Answer 3

你可以使用基于PhantomJS的另一个项目CasperJS。

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

casper.run();

- Silvio Lucena Junior

Answer 4

下面的解决方案适用于我。

    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

- onlyme

Answer 5

我有同样的需求，我尝试了这个方法，对我来说很有效：

在URL中不要忘记http://www。

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();
});

- ZinebM

---

因为它实际上并没有像问题中所述的那样将“单个HTML元素保存为PNG”，而只是将某个元素的内部HTML打印到控制台，所以被投票否决。 - Val Redchenko