CasperJS 屏幕截图未将图像渲染为 png 文件答案

【问题标题】：CasperJS screenshot is not rendering images to png fileCasperJS 屏幕截图未将图像渲染为 png 文件
【发布时间】：2014-12-21 03:54:13
【问题描述】：

我通过 casperjs 使用 phantomjs 成功地从多个网站抓取屏幕截图。尽管让一个站点 http://fiver.com 渲染此元素中的背景横幅，但我遇到了真正的问题：

<div class="hero-slide sel" style="background-image: url('//cdnil21.fiverrcdn.com/assets/v2_photos/sellerpage-coverphoto-779e2108b002090406e707086772ad9b.jpg');">
    <img alt="Sellerpage coverphoto" src="//cdnil21.fiverrcdn.com/assets/v2_photos/sellerpage-coverphoto-779e2108b002090406e707086772ad9b.jpg">
</div>

然后<div class="packages-list cf"> 中的前三个图像也不会渲染。后面的图像渲染成 png 就好了。

正在使用的版本：

phantomjs：1.9.8
casperjs: 1.1.0-beta3

我正在为 casperjs 使用以下页面设置：

  pageSettings: {
javascriptEnabled: true,
loadImages: true,
loadPlugins: true,
localToRemoteUrlAccessEnabled: true,
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11"

} });

我正在加载页面，该页面已成功重定向到 https url。我正在使用这个配置文件运行：

{"sslProtocol": "any", 
 "ignoreSslErrors": true, 
 "ssl-certificates-path": "ssl", 
 "web-security": false, 
 "cookiesFile": "biscuit", 
 "maxDiskCacheSize": 1000, "diskCache": true }

执行并等待所有内容加载的代码是：

this.thenOpen(screenshotUrl, function() {
    this.wait(25000);

    // Fix transparent background rendering bug
    // Courtesy of: http://uggedal.com/journal/phantomjs-default-background-color/
    this.evaluate(function() {
        // css injection to force backgrounds to print
        var style = document.createElement('style'),
         text = document.createTextNode('body { background: #fff; -webkit-print-color-adjust: exact; }');
        style.setAttribute('type', 'text/css');
        style.appendChild(text);
        document.head.insertBefore(style, document.head.firstChild);

        var images = document.getElementsByTagName('img');
        images = Array.prototype.filter.call(images, function(i) { return !i.complete; });
        window.imagesNotLoaded = images.length;
        Array.prototype.forEach.call(images, function(i) {
            i.onload = function() { window.imagesNotLoaded--; };
        });
    });
});
casper.waitFor(function() {
    return this.evaluate(function() {
        return window.imagesNotLoaded == 0;
    });
 });
 this.then(function(){
     this.echo('Screenshot for ' + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
     this.capture('screenshots/' + screenshotDateTime + '/' + viewport.name + '-' + viewport.viewport.width + 'x' + viewport.viewport.height + '.png', {
    top: 0,
    left: 0,
    width: viewport.viewport.width,
    height: viewport.viewport.height
    });
  });

我尝试将等待时间设置为 100000，但它仍然不起作用。在评估中，我正在注入一些 css 并运行一个试图等待所有图像加载的函数。然后我进入我的 this.then 函数将图像渲染到磁盘。

我正在用这个把头发拉出来。

截图如下：http://postimg.org/image/flvpvhy6v/

有什么想法吗？

【问题讨论】：

显示您当前的代码外观。谢谢。
CasperJS 当前呈现的屏幕截图也会有所帮助。
感谢 alecxe，添加了代码。你给杰弗里，不能在这里发布图片，没有足够的代表。
this.wait(5000); 之后会发生什么（一直到回调）？如果它不是then* 或wait*，你必须把它放在一个步骤中。请注册resource.error、casper.page.onResourceTimeout、remote.message 和page.error 活动。可能有错误。
嗨 Artjom B。我已经在上面添加了整个代码块。

标签： javascript phantomjs casperjs

【解决方案1】：

JavaScript 没有阻塞等待或睡眠功能。因此，当您wait 时，您安排了一个异步步骤。您的代码在 wait 调用之后包含一个 evaluate 调用。 evaluate 调用是同步/阻塞的，但wait 不是，所以wait 将在evaluate 之后执行。您必须将同步代码放在诸如wait* 或then* 之类的步进函数的回调中。

this.wait(25000, function(){
    this.evaluate(function() {
        // some code
    });
});

【讨论】：