CasperJS screenshot이 png 파일로 이미지를 렌더링하지 않습니다.

Question

casperjs를 통해 phantomjs를 사용하여 여러 웹 사이트에서 캡쳐 화면을 성공적으로 가져 왔습니다.

<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">에서 처음 세 가지 이미지 중 하나를 렌더링하지 않습니다 하나 개의 사이트에서, http://fiver.com을 얻는 것은이 요소의 배경 배너를 렌더링 할 수 있지만 나는 실제 문제가 있습니다. 그 다음 이미지들은 png로 렌더링됩니다.

버전 사용 :

• phantomjs : 1.9.8
• casperjs : 나는 casperjs에 대한 다음 페이지 설정을 사용하고

1.1.0-베타 3 :

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만큼 높은 대기 설정 시도,하지만 여전히 didn를 't는 work.In 평가에 일부 CSS를 주입하고 모든 이미지가로드 될 때까지 기다리려고하는 함수를 실행하고 있습니다. Thn 나는 나의 this.Next에 들어가서 디스크에 이미지를 렌더링하는 기능을한다.

나는 이걸 가지고 내 머리카락을 꺼내. http://postimg.org/image/flvpvhy6v/

어떤 아이디어 : 여기

는 스크린 샷입니까?

Answer 1

JavaScript는 차단 대기 또는 절전 기능이 없습니다. 따라서 wait 때 비동기 단계를 예약합니다. wait 통화 후 코드에 evaluate 통화가 포함되어 있습니다. evaluate 호출은 동기/차단이지만 wait은 아니므로 wait은 evaluate 다음에 실행됩니다. 당신은 wait* 또는 then* 같은 단계 함수의 콜백에 동기 코드를 넣어야합니다.

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