PHPで指定URLのスクリーンキャプチャを撮ろう

お久しぶりの登場、溝畑です。

JSばかりでしたが、今回はPHPです。
個人的に「指定したURLのキャプチャを撮ることはできないの？」という相談を受けて、調べてみました。

早速やっていきましょう！

PHP PhantomJS

PHP PhantomJSというライブラリを使います。

composer前提で話を進めていきます。
composer initでcomposer.jsonを作成。

{
    "scripts": {
        "post-install-cmd": [
            "PhantomInstaller\\Installer::installPhantomJS"
        ],
        "post-update-cmd":[
            "PhantomInstaller\\Installer::installPhantomJS"
        ]
    },

    "config": {
        "bin-dir": "bin"
    },
    "require": {
        "jonnyw/php-phantomjs": "4.*"
    }
}

{

"scripts": {

"post-install-cmd": [

"PhantomInstaller\\Installer::installPhantomJS"

"post-update-cmd":[

"PhantomInstaller\\Installer::installPhantomJS"

]

"config": {

"bin-dir": "bin"

"require": {

"jonnyw/php-phantomjs": "4.*"

}

中身はこんな感じで書いておき、composer installを実行してしばらく待ちます。

実際に使ってみる

手始めに画面全体を撮ってみましょう。

適当なPHPファイルを作成して、以下のコードを記述してください。
今回はscreenshot.phpとしておきます。

require_once('vendor/autoload.php');

use JonnyW\PhantomJs\Client;

$client = Client::getInstance();

$request = $client->getMessageFactory()->createCaptureRequest('http://www.key-p.com/');
$resuponse = $client->getMessageFactory()->createResponse();

// サイズ指定
$width = 800;
$height = 600;
$request->setViewportSize($width, $height);

// 保存先
$file = 'screenshot/capture.jpg';

$request->setOutputFile($file);
$client->send($request, $response);

if ($response->getStatus() === 200)
{
    echo $response->getContent();
}

require_once('vendor/autoload.php');

use JonnyW\PhantomJs\Client;

$client = Client::getInstance();

$request = $client->getMessageFactory()->createCaptureRequest('http://www.key-p.com/');

$resuponse = $client->getMessageFactory()->createResponse();

// サイズ指定

$width = 800;

$height = 600;

$request->setViewportSize($width, $height);

// 保存先

$file = 'screenshot/capture.jpg';

$request->setOutputFile($file);

$client->send($request, $response);

if ($response->getStatus() === 200)

{

echo $response->getContent();

}

書けたら、php screenshot.phpで実行します。
すると、createCaptureRequesetで指定した先のスクリーンキャプチャが保存されていることが分かります。
php-phantomjs1
え、これだけ？と思われるかもしれませんが、これだけなんです。

画面の一部がほしい

「いやいや、画面全体じゃなくて、この部分だけがほしい！」という場合もありますよね？
ということで、「KeyPoint」のロゴ部分だけを抜き出してみます。

Top、Leftが指定できるsetCaptureDimensionsを使うとできそうです。

先ほどのコードに以下を追記してください。

$request->setViewportSize($width, $height);
// ここから追加

$dim_width = 190;
$dim_height = 80;
$top = 70;
$left = 15;

$request->setCaptureDimensions($dim_width, $dim_height, $top, $left);

// ...

$request->setViewportSize($width, $height);

// ここから追加

$dim_width = 190;

$dim_height = 80;

$top = 70;

$left = 15;

$request->setCaptureDimensions($dim_width, $dim_height, $top, $left);

// ...

同じように実行してみるとどうでしょう？
php-phantomjs2 ロゴ部分を抜き出すことができました！
ただ、少し調整が面倒かもしれないですね。

最後に

もう少し面倒なものかと思っていましたが、簡単にできてびっくりしました。
「URLを貼り付けたら、その先のキャプチャを表示」だとか、そういった機能で使えるかもしれません。

このような場面に出くわした際は、是非お試しください。

参考
【PHP PhantomJS】特定URLのスクリーンキャプチャを生成する方法

価値ある技術の提供