はじめに
縦長のWebPageのスクリーンショット画像を取るのは実は地味に面倒です。phantomjsがそれをサポートしていたのですが、最近どうもメンテナンス終了になっているので、急ぎではないですが別の手段を模索する必要があります。
と言っている間に、必要が生まれてChrome Headlessで地道にScreenshot画像を取得することができるようになったので、その部分だけを切り出したDockerコンテナを公開したので共有します。
必要な環境
以下の環境で動作を確認しています。
- macOS High Sierra 0.13.3
- Docker Community Edition Version 18.03.0-ce-mac59
確認はしていませんが、Windowsでも動くと思います。
使い方
Windowsの場合は、 `pwd` の部分を画像を出力したいフォルダーに置き換えてください。
PCっぽい画面のScreenshotをとる場合
docker run -v `pwd`:/tmp/screenshot mokemokechicken/capture_web "https://www.yahoo.co.jp/" yahoo_pc.png
click すると拡大します。
iPhoneっぽい画面のScreenshotをとる場合
docker run -v `pwd`:/tmp/screenshot mokemokechicken/capture_web "https://www.yahoo.co.jp/" yahoo_sp.png -w 414x735 --ua 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'
click すると拡大します。
ソース
Chrome Extensionの Full Page Screen Capture の JS部分を参考に作っています。
仕組み
WebPageの下から順番に、キャプチャ画像を取得して、大きなCanvasにペタペタ貼っていきます。
なので、固定ヘッダーは大丈夫なのですが、固定フッターとか、動きがあるWebPageはやはり上手くは取得できないです。
まあ、そういう需要が出たら、今回のをちょいちょいいじればなんとかならないこともないでしょう。
さいごに
何かのお役に立てば。