Centos7でchromeを使ってお手軽Webスクリーンショット取得

概要

Webのスクリーンショット取得でCasperJSを使っていたがCSSで問題発生、キャプチャした画像のデザインがちょっとズレてる。
単純なスクリーンショットで十分だったので他の方法を模索中にchromeのヘッドレス機能を使えばいいことに気が付いたので、そのメモ。

重要なのはコレ

実行コマンド

最初にコマンドからいうと1行で済むお手軽さ。

google-chrome --headless --disable-gpu --screenshot --window-size=1280,1080 https://www.yahoo.co.jp/

インストール

chrome

まずはchromeをインストール。yumで設定してインストールいいですが、今回はお手軽に以下で。rootで。

cd /usr/local/src/
wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
yum localinstall google-chrome-stable_current_x86_64.rpm 

必要ライブラリ

早速google-chromeを実行するとライブラリがないと怒られた。

/usr/bin/google-chrome: error while loading shared libraries: libEGL.so.1: cannot open shared object file: No such file or directory

以下のライブラリをインストール。

yum install mesa-libGL mesa-libEGL

実行コマンド

google-chrome --headless --disable-gpu --screenshot --window-size=1280,1080 https://www.yahoo.co.jp/

※1 screenshot.pngというファイルができる。
※2 rootで実行する時は、--no-sandbox を追加(rootで実行すること自体どうなのかと、、、)。

javascriptでの例

test.js

var childProcess = require('child_process');
var targets = [
    { url: 'https://www.yahoo.co.jp/', file:'yahoo.png' },
    { url: 'https://www.google.com/', file:'google.png' }
];
for (var i = 0; i < targets.length; i++) {
    childProcess.exec('google-chrome --headless --disable-gpu --screenshot=' + targets[i]['file'] + ' --window-size=1280,1080 ' + targets[i]['url']);
}

参考

・ヘッドレス Chrome ことはじめ
https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja