ピュアPHPでスクリーンショットを撮る方法の解説です。
いくつか方法がありますが、今回はフリーライブラリの「chrome-php」を使っていきます。
前提条件
- PHP 7.4以降インストール済(2024/05/07時点)
- Composerインストール済
- WSL2経由のUbuntu上で作業しています。
Google Chromeインストール
WSL2経由のUbuntuはデフォルトではCLIのみでGUIが使えません。
スクリーンショットを撮るにはGoogle Chromeが必用です。
▼こちらのページを参考にインストールしてください。
インストール後に、Ubuntuのターミナル上で
「google-chrome」コマンドを実行すると
Chromeのウィンドウが起動します。
chrome-phpインストール
Ubuntuのターミナル上で次のコマンドを実行します。
composer require chrome-php/chrome
コード作成
スクリーンショットを撮るPHPコードを作成します。
ここの例では、
- 対象URL: https://macocci7.net/
- PHPファイル名：「src/screenshot.php」
- スクリーンショット保存先：「storage/screenshots/」
とでもしておきます。
▼対象URLのWindows上でのスクリーンショット
▼PHPコード
<?php
require_once __DIR__ . '/../vendor/autoload.php';
use HeadlessChromium\BrowserFactory;
$browserFactory = new BrowserFactory();
// Chrome起動
$browser = $browserFactory->createBrowser();
// URL
$url = 'https://macocci7.net/';
// 保存先
$pathBase = __DIR__ . '/../storage/screenshots/';
try {
// URLへアクセス、レンダリング
$page = $browser->createPage();
$page->navigate($url)->waitForNavigation();
// ページタイトル取得
$pageTitle = $page->evaluate('document.title')->getReturnValue();
echo 'URL> ' . $url . PHP_EOL;
echo 'Page Title> ' . $pageTitle . PHP_EOL;
// スクリーンショット保存
$page->screenshot()->saveToFile($pathBase . 'screenshot.png');
} finally {
// ブラウザを閉じる
$browser->close();
}▼保存先フォルダ作成
mkdir -p storage/screenshots実行結果
上記のPHPコードを実行してみます。
php -f src/screenshot.php
▼保存されたスクリーンショット
一応、撮れていますが、記事一覧が表示されていません。
ここの記事一覧はJavascriptでAPIから取得した結果を表示するようになっています。
Javascriptのレンダリングを待たずにスクリーンショットを保存したようです。
Javascriptレンダリング後のスクリーンショット
Javascriptレンダリングが完了してからスクリーンショットを撮るように設定します。
メソッド「waitForNavigation()」に
引数「Page::INTERACTIVE_TIME」を指定します。
<?php
require_once __DIR__ . '/../vendor/autoload.php';
use HeadlessChromium\BrowserFactory;
use HeadlessChromium\Page;
$browserFactory = new BrowserFactory();
// Chrome起動
$browser = $browserFactory->createBrowser();
// URL
$url = 'https://macocci7.net/';
// 保存先
$pathBase = __DIR__ . '/../storage/screenshots/';
try {
// URLへアクセス、レンダリング
$page = $browser->createPage();
$page->navigate($url)->waitForNavigation(Page::INTERACTIVE_TIME);
// ページタイトル取得
$pageTitle = $page->evaluate('document.title')->getReturnValue();
echo 'URL> ' . $url . PHP_EOL;
echo 'Page Title> ' . $pageTitle . PHP_EOL;
// スクリーンショット保存
$page->screenshot()->saveToFile($pathBase . 'screenshot_jscompleted.png');
} finally {
// ブラウザを閉じる
$browser->close();
}▼実行結果
Javascriptのレンダリングが完了し、記事一覧が表示されています。
ウィンドウサイズの調整
メソッド「createBrowser()」の引数で
ウィンドウサイズを指定できます。
デフォルトでは800×600ピクセルです。
1920×2000ピクセルで指定してみます。
// starts headless Chrome
$browser = $browserFactory->createBrowser([
'windowSize' => [1920, 2000],
]);▼実行結果
このようになりました。
これなら縦長のページでも丸々スクリーンショットを撮れそうですね。
この大きさで240KB程度です。
※CSSセレクタやXPathで指定したノードのみのスクリーンショットも撮れます。
コメント