PhantomJS - Rendering fails to show all images

问题

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

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.)

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

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.......">.

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

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...

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?

回答1:

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 = [];

then, as we load each page in PhantomJS:

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

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;

来源：https://stackoverflow.com/questions/24643357/phantomjs-rendering-fails-to-show-all-images

标签

pdf-generation

phantomjs