PhantomJS-渲染无法显示所有图像 [英] PhantomJS - Rendering fails to show all images

问题描述

我有一个phantomjs脚本，它正在逐步浏览我的网站页面.

I have a phantomjs script that is stepping through the pages of my site.

对于每个页面，在完成页面后，我先使用page = new WebPage()，然后使用page.close(). (这是对该过程的简化描述，我使用的是PhantomJS 1.9.7版.)

For each page, I use page = new WebPage() and then page.close() after finishing with the page. (This is a simplified description of the process, and I'm using PhantomJS version 1.9.7.)

在每页上，我使用page.renderBase64('PNG')一次或多次，然后将结果添加到数组中.

While on each page, I use page.renderBase64('PNG') one or more times, and add the results to an array.

完成所有操作后，我将建立一个新页面并循环浏览图像数组，并使用<img src="data:image/png;base64,.......image.data.......">将每个图像添加到页面中.

When I'm all done, I build a new page and cycle through the array of images, adding each to the page using <img src="data:image/png;base64,.......image.data.......">.

完成后，我使用page.render(...)制作PDF文件.

When done, I use page.render(...) to make a PDF file.

这一切都很好...除了在第20张图像后图像不再出现在PDF中之外-其余图像仅显示为4x4像素黑点

This is all working great... except that the images stop appearing in the PDF after about the 20th image - the rest just show as 4x4 pixel black dots

要对此进行故障排除...

For troubleshooting this...

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

• I've changed the render to output a PNG file, and have the same problem after the 19th or 20th image.
• I've outputted the raw HTML. I can open that in Chrome, and all the images are visible.

有什么想法为什么渲染会失败?

Any ideas why the rendering would be failing?

推荐答案

解决了该问题.事实证明，执行render时，PhantomJS仍在准备图像.如下所示，将render移到onLoadFinished处理程序中，即可解决此问题.之前，page.render在分配page.content =之后立即被调用.

Solved the issue. Turns out that PhantomJS was still preparing the images when the render was executed. Moving the render into the onLoadFinished handler, as illustrated below, solved the issue. Before, the page.render was being called immediately after the page.content = assignment.

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

For those interested in doing something similar, here's the gist of the process we are doing:

var htmlForAllPages = [];

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

then, as we load each page in PhantomJS:

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

完成后，将创建最终的PDF ...我们已经准备好模板文件，其中包含所有必需的HTML和CSS等，只需将生成的HTML插入其中即可.

When done, the final PDF is created... We have a template file ready, with all the required HTML and CSS etc. and simply insert our generated HTML into it:

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;

这篇关于PhantomJS-渲染无法显示所有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！