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

前回、 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)

ということにしました。

 

shot_nfc-jp_net_sq

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

 

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

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

wkhtmltoimage は 0.12.3 です。

FireFox

nfc-jp_net_firefox_def

 

Internet Explorer11

nfc-jp_net_ie11_def

 

Google Chrome

nfc-jp_net_chrome_def

 

Microsoft Edge

nfc-jp_net_edge_def

 

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

width:1400、height:1400

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

FireFox

nfc-jp_net_firefox_op2

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

 

Internet Explorer11

nfc-jp_net_ie11_op2

 

Google Chrome

nfc-jp_net_chrome_op2

 

Microsoft Edge

nfc-jp_net_edge_op2

 

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

他は上記と同じです。

FireFox

nfc-jp_net_firefox_op120

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

 

Internet Explorer11

nfc-jp_net_ie11_op120

 

Google Chrome

nfc-jp_net_chrome_op120

 

Microsoft Edge

nfc-jp_net_edge_op120

 

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

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

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

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

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

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


qhm_nfc-jp_net

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

ほぼ完璧!。

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


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