PhantomJS를 사용하여 웹 페이지를 렌더링

Question

모든 계산 된 스타일을 가진 전체 문서의 html을 서버로 전달하여 PhantomJS 렌더링을 얻고 PNG로 저장할 수 있습니까? (html2canvas와 비슷합니다.)

나는 PhantomJS를 사용하여 웹 페이지의 스크린 샷을 캡처합니다 (현재 상태). 따라서 모달 대화 상자, 클릭 된 탭 등이 모두 스크린 샷에 포함됩니다.

Answer 1

계산 된 스타일은 DOM에 없으므로 전달할 수 없습니다. CSS가 적용될 때 DOM 노드의 속성입니다. 이 기능을 사용하려면 서버에 액세스 할 수있는 모든 스타일을 만들어야합니다. 예를 들어 스타일 시트가 액세스 제어되는 경우 서버는 추가로 로그인해야합니다. 이 경우는 거의 발생하지 않습니다.

서버에

document.documentElement.outerHTML 

를 보낼 아마 충분하고 PhantomJS이

var page = require('webpage').create(); 
page.onLoadFinished = function(status){ 
    page.render("page.png"); 
    phantom.exit(); 
}; 
page.content = "received HTML as string" 
    .replace(/href="\/\//g, 'href="http://') 
    .replace(/href=\/\//g, 'href=http://'); 

때때로 자원 (스타일 시트)의 URL의 프로토콜이 부족

수신 된 HTML을 렌더링 할 수 있지만, PhantomJS에 필요한 것 로컬 페이지가로드 될 때 HTTP 프로토콜 ( page.content으로 설정) 그렇지 않으면 URL이 http:// 대신 file://을 사용한다고 가정합니다.

--ssl-protocol=tlsv1 또는 --local-to-remote-url-access=true과 같은 일부 명령 줄 옵션을 사용하여 PhantomJS를 실행해야 할 수도 있습니다.