javascript - PhantomJS でページの一部をレンダリングするには?

Question

Phantom.JS を使用して、個々の HTML 要素を PNG にレンダリングしたいと考えています。これが可能かどうか誰にもわかりますか？また、Phantom.js を使用して、ユーザーが既に見ているページをレンダリングするにはどうすればよいでしょうか?

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');

あなたの質問の2番目の部分がわかりません。Phantom.js はヘッドレスです。つまり、ユーザーが見ている実際のディスプレイはありません。

Answer 2

PhantomJS に基づく別のプロジェクトである CasperJS を使用できます。

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

casper.run();

Answer 3

私は同じ必要性を持っていました、私はこれを試しました、そしてそれは私のためにうまくいきました:

http://wwwURLの を忘れないでください

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