PhantomJS - 렌더링이 모든 이미지를 표시하지 못합니다.

Question

내 사이트의 페이지를 훑어보고있는 phantomjs 스크립트가 있습니다.

각 페이지에 대해 페이지를 완료 한 후 page = new WebPage()과 page.close()을 사용합니다. (이 과정에 대한 간략한 설명이며, PhantomJS 버전 1.9.7을 사용하고 있습니다.)

각 페이지에서 한 번 이상 page.renderBase64('PNG')을 사용하고 결과를 배열에 추가합니다.

모두 완료되면 새 페이지를 만들고 이미지 배열을 순환하여 각각에 <img src="data:image/png;base64,.......image.data.......">을 사용하여 페이지에 추가합니다.

완료되면 page.render(...)을 사용하여 PDF 파일을 만듭니다.

이

는 모든 작업 위대한 ... 제외하고는 이미지에 대한 20 이미지 후 PDF에 나타나는 중지하는 것이 - 나머지는 단지 4 × 4 픽셀 검은 점이 문제를 해결하는 데

로 표시 ...

• 나는 render을 PNG 파일을 출력하도록 변경했으며, 19 번째 또는 20 번째 이미지 이후에 동일한 문제가 발생했습니다.
• 원시 HTML을 출력했습니다. 내가 크롬에서 열 수 있으며 모든 이미지가 표시됩니다.

렌더링이 실패하는 이유는 무엇입니까?

Answer 1

문제가 해결되었습니다. PhantomJS가 render이 실행되었을 때 여전히 이미지를 준비하고 있다고 밝혀졌습니다. 아래 그림과 같이 render을 onLoadFinished 핸들러로 이동하면 문제가 해결되었습니다. 이전에는 page.content = 할당 직후에 page.render이 호출되었습니다. 우리가 PhantomJS의 각 페이지로드로,

var htmlForAllPages = []; 

다음 : 비슷한 일을에 관심이있는 사람들을 위해

, 여기에 우리가하고있는 프로세스의 요점이다

var img = page.renderBase64('PNG'); 
... 
htmlForAllPages.push('<img src="data:image/png;base64,' + img + '">'); 
... 

수행의 최종 PDF 생성 ... 우리는 필요한 모든 HTML과 CSS 등으로 템플릿 파일을 준비하고 생성 된 HTML을 간단히 삽입합니다 :

var fs = require('fs'); 
var template = fs.read('DocumentationTemplate.html'); 
var finalHtml = template.replace('INSERTBODYHERE', htmlForAllPages.join('\n')); 

var pdfPage = new WebPage(); 
pdfPage.onLoadFinished = function() { 
    pdfPage.render('Final.pdf'); 
    pdfPage.close(); 
}; 
pdfPage.content = finalHtml;