Webページ全体のScreenShot画像を1行で取得するDockerコンテナ
はじめに
縦長の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はやはり上手くは取得できないです。
まあ、そういう需要が出たら、今回のをちょいちょいいじればなんとかならないこともないでしょう。
さいごに
何かのお役に立てば。
Author And Source
この問題について(Webページ全体のScreenShot画像を1行で取得するDockerコンテナ), 我々は、より多くの情報をここで見つけました https://qiita.com/mokemokechicken/items/a6d431e09e5431465662著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .