Last active
May 14, 2024 02:47
-
-
Save macocci7/fb211dbb976009ed8b29b8c3ec11789c to your computer and use it in GitHub Desktop.
chrome-php/chrome 指定要素のみのスクリーンショット＆HTML取得 (Taking Screenshot and Html of Selected Node)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
このコードを使用するには chrome-php/chrome が必用です。