PhantomJS で Screenshot を取る方法
流れ
- まずは PhantomJS をいれます
- スクリプト書きます
-
phantomjs foo.js
で実行します
Mac で動かします
Step1. まずは、brew で PhantomJS をインストール。
install_by_homebrew
$ brew install phantomjs
$ brew list phantomjs
# /usr/local/Cellar/phantomjs/2.1.1/bin/phantomjs
# /usr/local/Cellar/phantomjs/2.1.1/share/phantomjs/ (45 files)
Step2. スクリプトを書きます。
screenshot_phantomjs.js
var url = 'http://www.metro.tokyo.jp/'
// headlessブラウザを作る
var page = require('webpage').create();
page.viewportSize = { width: 1200, height: 600 };
page.clipRect = {
top: 0,
left: 0,
width: 1200,
height: 600
};
// 指定したURLを開く
page.open(url, function(status) {
console.log("Status: " + status);
if (status === "success") {
page.render('./image_phantomjs.png');
}
phantom.exit();
});
Step3. コマンドを叩いて画像ができることを確認します。
$ phantomjs screenshot_phantomjs.js
Status: success
おまけ1. 切り取り位置の指定
clipRect
を調整すれば、狙った箇所を切り取ることができます。
page.clipRect = {
top: 200,
left: 720,
width: 500,
height: 250
};
おまけ2. Docker コンテナにいれる場合
以下の sh スクリプトを Dockerfile で叩いていれています。
install_phantomjs.sh
apt-get update
apt-get install build-essential chrpath libssl-dev libxft-dev -y
apt-get install libfreetype6 libfreetype6-dev -y
apt-get install libfontconfig1 libfontconfig1-dev -y
cd ~
export PHANTOM_JS="phantomjs-2.1.1-linux-x86_64"
wget https://github.com/Medium/phantomjs/releases/download/v2.1.1/$PHANTOM_JS.tar.bz2
tar xvjf $PHANTOM_JS.tar.bz2
mv $PHANTOM_JS /usr/local/share
ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin
phantomjs --version
以上です。ありがとうございました。
Headless Chrome で同じようなことをしてみたいです。🚶🏼
Author And Source
この問題について(PhantomJS で Screenshot を取る方法), 我々は、より多くの情報をここで見つけました https://qiita.com/mochizukikotaro/items/968fd59c2859a502f606著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .