javascript - CasperJS 屏幕截图未将图像渲染为 png 文件

Question

我通过 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 网址。我正在使用此配置文件运行:

{"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，但仍然没有用。在评估中，我注入(inject)了一些 CSS 并运行了一个试图等待所有图像加载的函数。然后我进入我的 this.then 函数将图像渲染到磁盘。

我用这个把我的头发拔掉了。

这是屏幕截图:http://postimg.org/image/flvpvhy6v/

有什么想法吗？

Answer 1

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

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