1

PhantomJS を使用して Web サイトの一部をレンダリングする方法:(例)

var page=require('webpage').create();
var ur ='http://www.sd.gov/';
function kk(){page.open(ur, function (status) {
       this.s = function(){
        var p = page.evaluate(function () {
            return document.getElementById('exampleHeader1').style.getPropertyValue("background-image").replace(/^(url)\(|\)/g,'');  
          });
        return p;
        }
        return s();
    phantom.exit();   
  });
};
4

1 に答える 1

1

Phantomjs では、 WebPage.Renderを使用して Web ページをファイルにレンダリングできます。これにより、ページ全体またはwebpage.clipRectで指定された四角形がレンダリングされます。Web サイトの一部 (HTMl 要素) をレンダリングするには、element.getBoundingClientRectを使用できます。これにより、HTML 要素のバウンディング ボックスが与えられます。

可能なスクリプトは

var page = require('webpage').create();
page.viewportSize = { width: 1600, height: 1200 };

var getElementBounds = function (elementId) {
    return page.evaluate(function (id) {
        var clipRect = document.getElementById(id).getBoundingClientRect();
        return {
            top: clipRect.top,
            left: clipRect.left,
            width: clipRect.width,
            height: clipRect.height
        };
    }, elementId);
}

var url = 'http://www.sd.gov/';
page.open(url, function (status) {
    setTimeout(function () {
        var clipRect = getElementBounds('exampleHeader1');
        page.clipRect = clipRect;
        page.render('header.png');
        phantom.exit();
    }, 1000);
});
于 2013-09-11T07:52:07.687 に答える