株式会社ＮＦＣ

– New Future Create –

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

投稿者: IT-Owner2016/02/05News、WordPress、スタッフブログ、レンタルサーバー、備忘録

前回、 wkhtmltoimage をレンタルサーバーにインストールして、PHPを作成して実行してみたところまで報告しました。

実際のPHPは、入力のフォーム画面を伴いPOSTするまでのPHPと、POSTで受け取ったパラメータで wkhtmltoimage を実行し画像ファイルを作成・表示するものに分けて作成しました。

wkhtmltoimage の実行は具体的には、

$wkhtmltox = "/入ってるフォルダ名/wkhtmltoimage" ;

$cmd = $wkhtmltox ;

if (オプションの有無を条件としてます) {
	$cmd .= $quality ;
	$cmd .= " --format ".$format;
	$cmd .= " --disable-smart-width";
	$cmd .= " --width ".$width;
	$cmd .= " --height ".$height;
	$cmd .= " --javascript-delay ".$time;
	$cmd .= " --no-stop-slow-scripts";
	$cmd .= " --zoom ".$zoom;
}

exec($cmd." ".$geturl." ".$mydir.$image_name );

としました。

exec が良いのかどうかわかりませんが、これでとりあえず動いてます。

さらに、入力されたURLと画像ファイル名をMySQLに登録しする機能をつけて、サムネイル画像を複数サイズにリサイズし自動作成するPHP。
WordPress等から好きなサイズを呼び出して、その画像を出力するPHPも作成しましたが、それらは別の機会に報告させていただきます。

まずは、前回も報告したように、実行結果が異なるのには、はっきり言って参ってしまいました。

弊社のユーザーサイトでいろいろと試しましたが、うまく行く(実行結果がそれほど変わらない。安定している)サイトと、うまく行かないサイトに分かれました。

特にこのサイト(今ご覧になっているサイト)の実行結果が一番ひどい！！ガックリ来ました。

オプションや実行するブラウザによって、実行結果が異なる

PHPでは、URLやオプションを選択できる入力画面を作成し、実行！

実行してみたのは、URLはこのサイト(https://nfc-jp.net)で、

デフォルト(標準)：URL と出力ファイル名のみの指定。
縦サイズ・横サイズを1400pxに指定し、さらに
- disable-smart-width
- no-stop-slow-scripts
- javascript-delay デフォルトの 200 と 120000の2種類(単位はms)

ということにしました。

本当は、こういう風に出てほしいんですが、しかし・・・
(ちなみにこの画像はPCのスクショです。)

デフォルト:URL と出力ファイル名のみの指定

実行環境は、PCは OS:Windows10 Pro 64bit、Memory:8Gb、グラフィック:Intel HD 5500 、レンタルサーバーは OS:Linux 64bit、PHP：V7.0 です。

wkhtmltoimage は 0.12.3 です。

FireFox

Internet Explorer11

Google Chrome

Microsoft Edge

オプション:javascript-delay 200(ms)

width:1400、height:1400

disable-smart-width と no-stop-slow-scripts も同時にしてしています。

FireFox

同じオプションでも、実行する度に少しずつ違います。
以下同様

Internet Explorer11

Google Chrome

Microsoft Edge

オプション:javascript-delay 120000(ms)

他は上記と同じです。

FireFox

やはり、同じオプションでも、実行する度に少しずつ違います。
以下同様

Internet Explorer11

Google Chrome

Microsoft Edge

ブラウザはあまり関係ないのかもしれません。オプションの組み合わせや順番も関係あるのかもしれません。

結果的に思うような出力画像になっていません。

では、WordPressとの相性が良くないのかというと、そういうことも無いようです。
他のWordPressサイトでうまく行ってるのもあります。

使用しているテーマや、SSL化の関係もあるのかもしれません。
SSLだとどうしても、表示が遅くなってしまうからです。

何にしても、結果はちょっと残念ですが一番ひどいのは自社サイトということで、ユーザーさんのサイトは比較的うまく行ってるので、妥協して良しとします。

一番良いオプションの組み合わせを探し当てるまでは、試行錯誤します。

ちなみに、QHMデザインサンプル集だとこんな感じです。

ほぼ完璧！。

全てのサイトでこうありたいのです。

関連