2016-09-29 2 views
1

저는 꽤 오래 전 Sailsjs 프로젝트 중 하나와 함께 node-webshot을 사용해 왔습니다. 그 점에서 나는 동적 차트와 구글 차트를 사용하여 생성 된 차트를 포함하는 뷰가있는 웹 샷을 찍기 위해이 도구를 사용하고 있습니다. 문제는 그래프가 생성되면 (이 경우 거품 형 차트) 노드 - 웹 샷 메소드 호출이이 페이지의 빈 이미지를 생성한다는 것입니다. 그러나 브라우저에서 경로를 열면 그래프가 완벽하게 생성됩니다.URL의 웹 샷을 가져올 수 없습니다.

이 동적으로 생성됩니다 그래프의 종류 - http://jsbin.com/vewesafegi/edit?html,js,output

는 그리고 이것은 내가 그 webshot를 생성하기 위해 사용하고있는 돛 JS 노드 webshot 코드입니다.

var options = { 
     screenSize: { 
      width: 710, 
      height: 500 
     }, 
     shotSize: { 
      width: 710, 
      height: 'all' 
     }, 
     userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g', 
     siteType: 'url', 
     renderDelay: 500, 
     quality: 50 
    }; 

    webshot('http://localhost:1337/generatedChart','Chart.png', options, function(err) { 
     //do something 
     res.ok(); 
    }); 

답변

3

좋아 ... 그래서 노드 webshot의 문서를 읽고 webshot의 options에, 나는 true로 설정하면, 내가 콜백을 할 수 takeShotOnCallback라는 키를 설정할 수 있다는 것을 발견 (window.callPhantom('takeShot');) 페이지가로드됩니다.

이 콜백은 웹 샷 호출에 페이지의 스크린 샷을 가져 오도록 지시합니다. 자세히보기 - https://github.com/brenden/node-webshot#options

그리고 생성 된 샷이 비어있는 이유는 웹 샷을 찍을 때 동적으로 생성 된 그래프가 페이지에로드되지 않았기 때문입니다.

관련 문제