chrome-php/chrome 指定要素のみのスクリーンショット＆HTML取得 (Taking Screenshot and Html of Selected Node)

takeScreenshotAndHtmlOfSelectedNode.php

<?php

require_once __DIR__ . '/../vendor/autoload.php';

use HeadlessChromium\BrowserFactory;
use HeadlessChromium\Clip;
use HeadlessChromium\Dom\Dom;
use HeadlessChromium\Dom\Selector\CssSelector;
use HeadlessChromium\Page;
use headlessChromium\Utils;

// 保存先フォルダ
$storagePath = __DIR__ . '/../storage/';
$dirScreenshot = $storagePath . 'screenshots/';
$dirHtml = $storagePath . 'html/';

// URL
$url = 'http://localhost:8000/';

// セレクター（CSSセレクター、またはXPath）
$selector = '#docs-card-content';

// Chromeのウィンドウサイズ
$width = 800;
$height = 600;

// Chrome起動
$browserFactory = new BrowserFactory();
$browser = $browserFactory->createBrowser([
    'windowSize' => [$width, $height],
]);

try {
    // URLへアクセス、Javascriptレンダリング完了まで待ち
    $page = $browser->createPage();
    $page->navigate($url)->waitForNavigation(Page::INTERACTIVE_TIME);
    $page->evaluate('document.documentElement.innerHTML');

    // 指定箇所の位置取得
    $position = Utils::getElementPositionFromPage(
        $page,
        new CssSelector($selector)
    );

    // y座標取得（要素の上端）
    $clip = new Clip(
        $position['left'],
        $position['top'],
        $position['width'],
        $position['height'] 
    );

    // スクリーンショット保存（ページ全体）
    $page->screenshot([
            'captureBeyondViewport' => true,
            'clip' => $page->getFullPageClip(),
        ])
        ->saveToFile($dirScreenshot . '/localhost_top_full_page.png');

    // スクリーンショット保存（指定要素のみ）
    $page->screenshot([
            'captureBeyondViewport' => true,
            'clip' => $clip,
        ])
        ->saveToFile($dirScreenshot . '/localhost_top_seleced.png');

    // ページ全体のHTML取得＆保存
    $html = $page->getHtml();
    file_put_contents($dirHtml . 'localhost_top.html', $html);

    // 指定箇所以下のHTML取得＆保存
    $selectedNodes = (new Dom($page))->search($selector);
    file_put_contents(
        $dirHtml . 'localhost_top_selected.html',
        // 複数の該当ノードのHTMLを改行コードで結合
        implode(
            PHP_EOL,
            array_map(
                // $node: HeadlessChromium\Dom\Node
                // HeadlessChromium\Dom\Node->getHtml()
                // で該当ノード以下のHTMLを文字列で取得できます。 
                fn ($node) => $node->getHtml(),

                // $selectedNodes: array<int, HeadlessChromium\Dom\Node>
                $selectedNodes
            )
        )
    );
} finally {
    // Chrome終了
    $browser->close();
}

このコードを使用するには chrome-php/chrome が必用です。

composer require chrome-php/chrome