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中 - 其余图像显示为4x4像素黑点

对于此故障排除......

• 我已经更改了render输出PNG文件,并在第19或第20张图像后出现同样的问题.
• 我输出了原始HTML.我可以在Chrome中打开它,所有图像都可见.

任何想法为什么渲染会失败？

Answer 1

解决了这个问题.事实证明PhantomJS render在执行时仍在准备图像.如下图所示,移动render到onLoadFinished处理程序中解决了问题.之前,page.render在page.content =任务之后立即被召唤.

对于那些有兴趣做类似事情的人来说,这是我们正在做的过程的要点:

var htmlForAllPages = [];

然后,当我们在PhantomJS中加载每个页面时:

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;