phpでスクリンーショットをとるのに wkhtmltoimage を使ってみた

ユーザーサイトのTopページのスクリーンショットを取得することをいろいろ試してます。

これまでは、「HeartRailes Capture」というサイトを利用させていただいてます。

これがすごい便利なのですが、この自身のサイトがSSL対応なので、どうしても画像を取得して表示するとそのページが「一部SSL・・・」みたいに、完全なSSLページとしては表示されません。

「HeartRailes Capture」がSSL対応してくれるといいのですが・・・。

そこで、自分でスクリーンショットをPHPで作れないかといろいろ調べた結果、 wkhtmltoimage というのが良さそうなので試してみました。

wkhtmltoimage というのは、 wkhtmltopdf という画面のスクリーンショットをPDF化してくれるツールの画像版。
wkhtmltopdf をインストールすると wkhtmltox というフォルダが出来て、 wkhtmltopdf wkhtmltoimage の二つが使えるようになります。

wkhtmltopdf の詳細等説明はググればたくさん出てくるのでここでは割愛させていただきます。
Linux版やWindows版などがあり、私の場合はレンタルサーバー上でPHPで動作させたいので、サーバーの仕様に合わせた Linux 64bit用を使用させていただきました。
Versionは、ダウンロード時点での最新版の 0.12.3 です。

インストール方法等苦労話は別に報告します。

使用方法は、コマンドで、

wkhtmltoimage http://サイト 画像ファイル名

と叩けば、指定したURLのスクリーンショットが指定した画像ファイルとして保存されます。

ちなみにオプションはどのようなものがあるかというと、

wkhtmltoimage -H

と入力すれば出てきます。

出力結果が下記です。

Name:
  wkhtmltoimage 0.12.3 (with patched qt)

Synopsis:
  wkhtmltoimage [OPTIONS]... <input file> <output file>

Description:
  Converts an HTML page into an image,

General Options:
      --allow <path>                  Allow the file or files from the specified
                                      folder to be loaded (repeatable)
      --bypass-proxy-for <value>      Bypass proxy for host (repeatable)
      --cache-dir <path>              Web cache directory
      --checkbox-checked-svg <path>   Use this SVG file when rendering checked
                                      checkboxes
      --checkbox-svg <path>           Use this SVG file when rendering unchecked
                                      checkboxes
      --cookie <name> <value>         Set an additional cookie (repeatable),
                                      value should be url encoded.
      --cookie-jar <path>             Read and write cookies from and to the
                                      supplied cookie jar file
      --crop-h <int>                  Set height for cropping
      --crop-w <int>                  Set width for cropping
      --crop-x <int>                  Set x coordinate for cropping
      --crop-y <int>                  Set y coordinate for cropping
      --custom-header <name> <value>  Set an additional HTTP header (repeatable)
      --custom-header-propagation     Add HTTP headers specified by
                                      --custom-header for each resource request.
      --no-custom-header-propagation  Do not add HTTP headers specified by
                                      --custom-header for each resource request.
      --debug-javascript              Show javascript debugging output
      --no-debug-javascript           Do not show javascript debugging output
                                      (default)
      --encoding <encoding>           Set the default text encoding, for input
  -H, --extended-help                 Display more extensive help, detailing
                                      less common command switches
  -f, --format <format>               Output file format
      --height <int>                  Set screen height (default is calculated
                                      from page content) (default 0)
  -h, --help                          Display help
      --htmldoc                       Output program html help
      --images                        Do load or print images (default)
      --no-images                     Do not load or print images
  -n, --disable-javascript            Do not allow web pages to run javascript
      --enable-javascript             Do allow web pages to run javascript
                                      (default)
      --javascript-delay <msec>       Wait some milliseconds for javascript
                                      finish (default 200)
      --license                       Output license information and exit
      --load-error-handling <handler> Specify how to handle pages that fail to
                                      load: abort, ignore or skip (default
                                      abort)
      --load-media-error-handling <handler> Specify how to handle media files
                                      that fail to load: abort, ignore or skip
                                      (default ignore)
      --disable-local-file-access     Do not allowed conversion of a local file
                                      to read in other local files, unless
                                      explicitly allowed with --allow
      --enable-local-file-access      Allowed conversion of a local file to read
                                      in other local files. (default)
      --manpage                       Output program man page
      --minimum-font-size <int>       Minimum font size
      --password <password>           HTTP Authentication password
      --disable-plugins               Disable installed plugins (default)
      --enable-plugins                Enable installed plugins (plugins will
                                      likely not work)
      --post <name> <value>           Add an additional post field (repeatable)
      --post-file <name> <path>       Post an additional file (repeatable)
  -p, --proxy <proxy>                 Use a proxy
      --quality <int>                 Output image quality (between 0 and 100)
                                      (default 94)
  -q, --quiet                         Be less verbose
      --radiobutton-checked-svg <path> Use this SVG file when rendering checked
                                      radiobuttons
      --radiobutton-svg <path>        Use this SVG file when rendering unchecked
                                      radiobuttons
      --readme                        Output program readme
      --run-script <js>               Run this additional javascript after the
                                      page is done loading (repeatable)
      --disable-smart-width           Use the specified width even if it is not
                                      large enough for the content
      --enable-smart-width            Extend --width to fit unbreakable content
                                      (default)
      --stop-slow-scripts             Stop slow running javascripts (default)
      --no-stop-slow-scripts          Do not Stop slow running javascripts
      --transparent                   Make the background transparent in pngs
      --use-xserver                   Use the X server (some plugins and other
                                      stuff might not work without X11)
      --user-style-sheet <url>        Specify a user style sheet, to load with
                                      every page
      --username <username>           HTTP Authentication username
  -V, --version                       Output version information and exit
      --width <int>                   Set screen width, note that this is used
                                      only as a guide line. Use
                                      --disable-smart-width to make it strict.
                                      (default 1024)
      --window-status <windowStatus>  Wait until window.status is equal to this
                                      string before rendering page
      --zoom <float>                  Use this zoom factor (default 1)

Specifying A Proxy:
  By default proxy information will be read from the environment variables:
  proxy, all_proxy and http_proxy, proxy options can also by specified with the
  -p switch

  <type> := "http://" | "socks5://"
  <serif> := <username> (":" <password>)? "@"
  <proxy> := "None" | <type>? <string>? <host> (":" <port>)?

上記を Google翻訳で日本語化したのがこれです。

名:
  (パッチ済みQT付き)wkhtmltoimage 0.12.3

あらすじ:
  wkhtmltoimage [OPTIONS] ... <入力ファイル> <出力ファイル>

説明:
  HTMLページが画像に変換し、

一般的なオプション:
      --allow <パス>指定したフォルダからファイルまたはファイルがロードされることを可能にする(反復可能)
      --bypass-プロキシのための<値>ホストにはプロキシ(反復可能)
      --cache-dirの<パス>のWebキャッシュディレクトリ
      --checkbox-チェックインSVGをチェックチェックボックスをレンダリングするときに、<パス>このSVGファイルを使用します
      未チェックのチェックボックスをレンダリングするとき--checkbox-SVG <path>は、このSVGファイルを使用します
      --cookieは、<名前> <値>追加のクッキー(再現性)を設定し、値はURLエンコードする必要があります。
      --cookieジャー<パス>読むとから供給されたクッキーのjarファイルにクッキーを書き込みます
      トリミング用--crop-H <整数>高さを設定します
      トリミング用--crop-W <整数>設定幅
      --crop-xの<整数>の設定は、トリミングのためのx座標
      --crop-Y <整数> yはトリミング座標を設定
      --customヘッダ<名前> <値>を設定し、追加のHTTPヘッダ(反復可能)
      --customヘッダ-伝播がで指定されたHTTPヘッダを追加します。
                                      各リソース要求のための--custom-ヘッダー。
      --no-カスタムヘッダー伝搬はで指定されたHTTPヘッダを追加しないでください
                                      各リソース要求のための--custom-ヘッダー。
      --debug-javascriptの表示JavaScriptのデバッグ出力
      --no-デバッグJavaScriptはデバッグ出力(デフォルト)を表示しません
      入力のために、デフォルトのテキストエンコードを設定します。<エンコード> --encoding
  あまり一般的でコマンドスイッチを詳述-H、--extended-ヘルプを表示し、より広範なヘルプ、
  -f、--format <フォーマット>出力ファイル形式
      --height <整数>設定画面の高さ(デフォルトはページのコンテンツから計算される)(デフォルト0)
  -h、--helpヘルプを表示します
      --htmldoc出力プログラムのHTMLヘルプ
      --imagesですか負荷や印刷画像(デフォルト)
      --no-画像はロードまたは印刷イメージしないでください
  -n、--disable-JavascriptをWebページではJavaScriptを実行することはできません
      WebページではJavaScriptを実行できるようにするか--enable-ジャバスクリプト(デフォルト)
      --javascript-遅延が<ミリ秒> javascriptの仕上げのためのいくつかのミリ秒を待ちます(デフォルト200)
      --license出力ライセンス情報を表示して終了
      --load-エラー処理<ハンドラ>負荷に失敗するページを処理する方法を指定します、中止無視またはスキップ(デフォルトのアボート)
      <ハンドラ>メディア・エラー処理を--loadロードに失敗したメディアファイルを処理する方法を指定します(デフォルトは無視する)、中止を無視またはスキップ
      --disable-ローカル・ファイル・アクセスを明示的--allowで許可されていない限り、ローカルファイルの変換は他のローカルファイルで読み取ることが許されません
      ローカルファイルの変換は他のローカルファイルを読み込むことが可--enable-ローカルファイルアクセス。 (デフォルト)
      --manpage出力プログラムのmanページ
      --minimumフォントサイズ<整数>最小フォントサイズ
      --password <パスワード> HTTP認証のパスワード
      --disable-プラグインがインストール]を無効プラグイン(デフォルト)
      --enable-プラグインは(プラグインはおそらく動作しません)インストールされたプラグインを有効にします
      --post <名前> <値>後の追加フィールドを追加します(繰り返し可能)
      --postファイル<名前> <パス>ポストの追加ファイル(反復可能)
  -p、--proxy <プロキシ>プロキシを使用します
      --quality <整数>出力画質(0?100)(デフォルト94)
  -q、あまり冗長に--quiet
      <パス>にチェック-SVG---radiobuttonチェックをラジオボタンをレンダリングするときに、このSVGファイルを使用します
      未チェックのラジオボタンをレンダリングするとき--radiobutton-SVG <path>は、このSVGファイルを使用します
      --readme出力プログラムのreadme
      --run-スクリプト<JS>ページの読み込みが完了した後、この追加のJavaScriptを実行します(繰り返し可能)
      --disable-スマート幅は、それがコンテンツのための十分な大きさでない場合でも、指定された幅を使用します
      --enable-スマート幅割れないコンテンツ(デフォルト)に合うように--width拡張
      --stop-スロースクリプトが実行速度の遅いJavaScriptを停止します(デフォルト)
      --no-ストップスロースクリプトは、実行速度の遅いJavaScriptを停止しないでください。
      PNG画像内の背景を透明に--transparent
      --use-のxserverは、Xサーバを(いくつかのプラグインや他のものは、X11なしで動作しない場合があります)を使用します
      --user-スタイルシートの<url>すべてのページでロードするために、ユーザースタイルシートを指定します
      --username <ユーザー名> HTTP認証のユーザー名
  -V、--versionバージョン情報を出力して終了
      --width <整数>設定画面の幅、これはあくまでも目安線として使用されることに注意してください。それは厳密にするために--disable-スマート幅を使用してください。 (デフォルト1024)
      よるwindow.statusがページをレンダリングする前にこの文字列に等しくなるまで--windowステータス<windowStatus>待ち
      --zoom <フロート>このズーム倍率を使用します(デフォルト1)

プロキシの指定:
  デフォルトのプロキシ情報によって環境変数から読み込まれます。
  プロキシ、ALL_PROXYとHTTP_PROXY、プロキシオプションもによってで指定することができます
  -pスイッチ

  <タイプ>:= "のhttp://" | 「SOCKS5:// "
  <セリフ>:= <ユーザー名>( ":" <パスワード>)? "@"
  <プロキシ>:= "なし" | <タイプ>? <文字列>? <ホスト>( ":" <ポート>)?

英語の説明と日本語(ちょっと・・・怪しい部分もありますが)を合わせて見ると理解しやすいかも・・・


GoogleとYahooを試してみました。

shot_google

まずは、Google。

画像サイズは、横 1024px、縦 507px でした。


shot_yahoo

今度は Yahoo。

画像サイズは、 横 1024px、縦 1998px です。

両方とも、横が1024pxなのは、これがデフォルトだからです。

デフォルトだと、縦は表示される部分がすべて対象になるようです。


shot_nfc-jp

ちなみにこのサイトを指定するとこうなりました。

画像サイズは、 横 1024px、縦 7806px です。
しかも、実行する度に結果が少しづつ違います。

縦が長いのでファイルサイズも当然デカくなります。


これではわかりづらいと思うので、超簡単に体験できるPHPを用意しました。
ココ⇒ wkhtmlimageサンプル表示 をクリックしてください!。

PNG形式だと異様にファイルサイズが大きくなったりするので、オプションは控えめに選択できるようにしました。
簡単に作ったのでエラーチェックなど細かいところは勘弁してくださいね。

とりあえず、今回はここまで。続きも投稿します。


コメントは受け付けていません。