web-dev-qa-db-ja.com

Phantomjs-Webページのスクリーンショットを撮る

URLを持っています（例：http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4）そして、そのスクリーンショットを撮り、私のウェブページでプレビューしたい。つまり、ユーザーはプレビューボタンをクリックし、PhantomJSはWebページをPNG/JPEGとしてプレビューする必要があります

他のオープンソースを使用しても大丈夫です。

javascriptjqueryphantomjsfrontend
23
Abhiram Sampath

Phantomjsをインストールし、.bashrcにエイリアスを作成したか、Phantomjsバイナリを呼び出すようにシステムパスを更新したと仮定します。そうでない場合は、いくつかの初心者向けチュートリアルを熟読する必要があります。 http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

設定が完了したら、ターミナル（またはWindowsを使用している場合はシェル）で呼び出す単純なJavaScriptファイルを作成する必要があります。以下に簡単なスクリプト例を示します。

var WebPage = require('webpage');
page = WebPage.create();
page.open('http://google.com');
page.onLoadFinished = function() {
   page.render('googleScreenShot' + '.png');
   phantom.exit();}

次に、jsファイルを保存します。ターミナルまたはシェルを開き、次を実行します

phantomjs yourFile.js

それでおしまい。 jsファイルを呼び出したディレクトリを確認すると、Webページのスクリーンショットを含むpngファイルが必要です。

これは非常に単純であり、phantomjsでf-ingを行うには多くの注意事項がありますが、これは私ができる限り基本的です。 phantomjsの他のレシピが必要な場合は、次のサンプルスクリプトを参照してください。 https://github.com/ariya/phantomjs/wiki/Examples

32
cliffbarnes

上記の答えは基本的な使用には適していますが、PhantomJSはすべてのAJAXリクエストがロードされたかどうかを知りません。私は rl-to-image この問題。

  1. npm install url-to-image

  2. Screenshot.jsを書く

    var screenshot = require('url-to-image');
screenshot('http://google.com', 'google.png').done(function() {
    console.log('http://google.com screenshot saved to google.png');
});
  3. スクリプトを実行node screenshot.js
12
Kimmo