PhantomJS 과 CasperJS 을 이용한 자동 페이지 스크린샷 (캡쳐) 만들기

PhantomJS 과 CasperJS 을 이용한 자동 페이지 스크린샷 (캡쳐) 만들기

PhantomJS

팬텀JS는 화면이 없는 텍스트 브라우저라고 생각하시면 되는데요.

화면이 없는 텍스트 브라우저는 웹프로그램으로 웹자동화를 개발하기에는 더없이 편리한 기능을 제공합니다.

input box 에 값을 입력 또는 마우스 클릭 등 특정값 확인 또는 일련의 작업을 CLI 에서 javascript 로 개발할수 있습니다.

예를들면 티스토리 로그인후 카운터를 가져와 보여줄때는 PhantomJS를 통해 웹자동화로 구현하여 처리를 할 수가 있게 됩니다.

또한 이런 기능 말고도 웹 화면을 캡쳐 등 다양한 용도로 사용할수 있습니다.

설치

일반계정으로 설치

npm install -g phantomjs

정상적으로 잘 설치가 되었는지 확인

$ phantomjs -v
2.1.1

한글 깨질때 폰트설치 (리눅스에 윈도우 글꼴 설치)

$ yum install fonts-korean

ftp를 통해 C:\Windows\Fonts의 폰트파일을 /usr/share/fonts/window 로 업로드합니다.

업로드가 완료되면 확인

$ fc-cache -f -fv

CasperJS (캐스퍼JS)

CasperJS는 PhantomJS나 SlimerJS를 좀더 쉽고 편하게 사용하기 위한 기능들을 모아놓은 라이브러리입니다.

CasperJS를 사용하기 위해서는 PhantomJS 이 기본적으로 설치되어 있어야 하죠

CasperJS는 start()명령어와 run() 명령어 사이의 명령어를 순서대로 처리합니다. 

다른 javascript와 마찬가지로 비동기로 처리가 기본이지만 then() 명령어를 사용하면 동기화 처리가 가능하여 

위의 명령어가 끝나야지만 다음 명령어를 수행하게 됩니다.

자세한 설명은 해당 CasperJS 홈페이지를 참조하시면 됩니다.

설치

$ npm install -g casperjs

설치확인

$ casperjs --version
1.1.4

예제프로그램을 만들어 볼께요.

CasperJS를 사용하여 다음 결과를 캡쳐해보겠습니다.

var casper = require('casper').create();
casper.start();
casper.viewport(1400, 800);
casper.userAgent('User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36');
var text = encodeURIComponent("슈퍼태풍");
casper.open('https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&tltm=ta8m&q=' + text);
casper.then(function(){
  this.capture('capture-daumsearch.png',{
    top:0, left:0, width: 1400, height: 800
  });
  //this.captureSelector('capture-daumsearch.png','#profColl');  //selector 사용시
});
 
casper.run();

Selector 사용할땐

this.captureSelector('capture-daumsearch.png','#profColl');

아래와 같이 검색결과 캡쳐되었습니다.