근래에 재택근무도 많고, 업무 때문에 웹페이지를 캡처해야 할 일이 많은데,
캡처 프로그램 열고 일일이 캡처하기도 힘들고 요즘 웹페이지는 모바일 대응용
반응형 웹페이지도 많아서 스크롤별로 캡처해서 이어 붙이기도 귀찮고 힘들어서 (이노무 귀차니즘 ㅠ)
그냥 웹페이지 URL 을 입력하면 알아서 웹페이지 전체를 이미지로 캡쳐하는 걸 만들어 봤습니다.
외국 사이트도 url to image 서비스가 있는데 이게 어떻게 해도 풀스크롤 캡쳐가 안되더라구요!
그리고 캡쳐된 화면을 즉각에서 좀 따서 캡처하고 싶은데 이것도 안되고 해서 그냥저냥
몇일만에 만들어 봤습니다.
남는 서버하고 도메인에 대충 올려놓은건데 뭐 얼나마 많은 분들이 이용하실지 모르겠네요
암튼 PNG 이미지하고 PDF 두종류로 캡처할 수 있으며 이미지의 경우는 아래의 이미지처럼
풀 스크롤 캡쳐후 원하는 부분만 영역지정으로 따로 캡쳐 할 수 있습니다.
(오늘쪽 영역을 벗어나면 벋어난 부분이 검은색으로 함께 캡쳐가 되는 버그가 있네요 ㅠ)
필요하신분들에게 도움이 되었으면 좋겠습니다.
SSL 서버가 아닌데 URL 정보를 입력한다고 크롬에서는 저렇게 주의요함이라고 뜨네요! ㅠ.ㅠ
서버 용량이 많지 않아서 캡쳐된 이미지는 10분후 칼같이 삭제됩니다.
캡쳐후 브라우저에서 뭘하든 10분후에는 캡쳐 이미지가 자동으로 삭제되므로
캡처후 10분이 지났으면 다시 캡쳐하셔야 합니다
몇가지 정리를 하자면
1. 캡처를 원하는 웹서버가 Curl 응답에 20초 이내에 반응해줘야 캡처를 할 수 있습니다. (그래서 쿠팡은 안됨)
2. DOM 객체를 사용하여 계속해서 페이지를 로딩하는 페이지는 최대 20초 분량, 혹은 최초 로딩 이벤트 부분까지만
캡처가 됩니다. (트위터나 페이스북등)
3. 캡쳐 이미지 최대 용량은 20메가 한계입니다. 20메가를 넘기면 다운되지 않습니다.
4. 웹페이지 PDF 변환은 웹페이지내의 CSS 정의와 JavsScript 사용에 따라서 캡쳐를 못하거나 안되는 경우도 있습니다.
5. 당연한거지만 모바일로 접속하면 모바일 화면용으로 캡쳐가 됩니다.
몇일 고생해서 만들었는데 이게 잘하는 짓인가 싶네요 ㅎㅎ
P.S :
모바일의 경우 아이폰은 캡처후 영역지정이 잘 되는데 안드로이드 폰은 영역값 이벤트를 읽지 못하는
경우가 있는듯 합니다. 제 테스트용 G6 폰은 아무리해도 안되네요! ㅠ.ㅠ
덧글
바빌디도 있긴있습니다
해보니 전부 페이스 전부 저장이 있긴있는데
사용하던것이 아니라 익숙하진않네요
모바일은 확인안함
오류도 좀 있고 해서 그냥 Curl 하고 nodeJs 하고 엮어서 대충 만들어 봤습니다.