ファントムJS - のclipRect - 私は画面にファントムJSを使用していJavascriptのヘルプ

Question

が、それはのclipRect

http://code.google.com/p/phantomjs/wiki/Interface#clipRect_(objectと呼ばれる機能を持っているページに

http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering

ショット）

誰かが私を見ることができますどのように私はclipRect私たちに次のコードを変更するので、私は部分的なスクリーンショットを取得し、全体的なものではない？ fine manualから

if (phantom.state.length === 0) { 
if (phantom.args.length !== 2) { 
    console.log('Usage: rasterize.js URL filename'); 
    phantom.exit(); 
} else { 
    var address = phantom.args[0]; 
    phantom.state = 'rasterize'; 
    phantom.viewportSize = { width: 600, height: 600 }; 
    phantom.open(address); 
} 
} else { 
    var output = phantom.args[1]; 
    phantom.sleep(200); 
    phantom.render(output); 
    phantom.exit(); 
}  

Answer 1

私はbrewを使用していましたが、v1.0.0が最も古いバージョンであるため、clipRectとほぼすべての他の機能がサポートされていなかったバージョン1.0.0をインストールしていました。あなたはこれらの指示に従った場合

は：その後、http://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X

を右クリック、いくつかのディレクトリに実行ファイルのbin/phantomjs.app /目次/ MacOSの/ phantomjsをコピーする（Macの場合）表示/ビューの内容を遵守し、ファイルをクリックし、クリックしてくださいあなたのPATHに

私はこれを監視しており、必要に応じて対応することができます。あなたが特定の要素のスクリーンショットを取得しようとしている場合

Answer 2

：

のclipRect（オブジェクト）

このプロパティは、レンダリング（）が呼び出されたときにラスタライズさウェブページの矩形領域を定義します。クリッピング矩形が設定されていない場合、render（）はWebページ全体を処理します。

例：あなたはrenderを呼び出す直前にphantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }

のでclipRectを設定してみてください：

var output = phantom.args[1]; 
phantom.sleep(200); 
phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 } 
phantom.render(output); 
phantom.exit(); 

左上隅（topとleft）がここであなたが把握する必要があるだろうとどのようにbig（widthとheight）の場合、クリッピング矩形が必要です。

は、いつでもrender()が呼び出される前にいつでも設定できますが、それから何が起こるかを確認してください。

Answer 3

、あなたはthis articleの下あたりとしてgetBoundingClientRectからclipRectに必要な情報を得ることができます：

page.clipRect = page.evaluate(function() { 
    return document.getElementById(THE_ELEMENT_YOU_WANT).getBoundingClientRect(); 
});