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

CasperJS screenshot is not rendering images to png file

本文关键字：png 文件 图像 屏幕截图 CasperJS      更新时间：2023-09-26

我通过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 就好了。

正在使用的版本：

  • 幻影：1.9.8
  • 卡斯珀斯：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，但仍然不起作用。在评估中，我注入了一些 css 并运行一个尝试等待所有图像加载的函数。我进入我的this.then函数将图像渲染到磁盘。

我用这个把头发。

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

有什么想法吗？

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

this.wait(25000, function(){
    this.evaluate(function() {
        // some code
    });
});
相关文章：