소개

세로 긴 WebPage의 스크린 샷 이미지를 찍는 것은 사실 수수께끼입니다. phantomjs가 그것을 지원했지만 최근에 유지 보수가 끝나기 때문에 급한 것은 아니지만 다른 수단을 모색해야합니다.

라고 말하는 동안, 필요가 태어나 Chrome Headless로 꾸준히 Screenshot 이미지를 얻을 수 있게 되었으므로, 그 부분만을 잘라낸 Docker 컨테이너를 공개했으므로 공유합니다.

필요한 환경

다음 환경에서 동작을 확인하고 있습니다.

macOS High Sierra 0.13.3

Docker Community Edition 버전 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는 역시 능숙하게는 취득할 수 없습니다.

글쎄, 그런 수요가 나오면, 이번을 조금 조금 뒤집으면 어떻게든 할 수 없을 것입니다.

사이고에게

뭔가 도움이된다면.