PhantomJS呈現的截圖比實際頁面高很多

我使用PhantomJS 1.9.8創建了一個網站截圖，經歷了這個問題，創建的PNG比截圖中看到的實際網站高得多。關於PhantomJS在這裏不尊重視口尺寸，還沒有結束討論：https://github.com/ariya/phantomjs/issues/10619 PhantomJS呈現的截圖比實際頁面高很多

但我認爲在我的情況下，它或多或少是字體大小和/或類型的問題，因爲您也可以在圖像中注意到。

也許有人面臨同樣的問題，可以提供一個可能的解決方法，因爲我需要截圖與網站本身具有相同的大小。

以下HTML用於頁：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>WSST</title> 
     <script src="js/test.js"></script> 
    </head> 
    <body style = "background-color: #FFFFFF"> 
     <span class = "hey">Page Start</span> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

    Page End 
    </body> 
</html>

這是JS文件傳遞給PhantomJS：

var args = require('system').args; 
var page = require('webpage').create(); 

var width = args[3]; 
var height = args[4]; 

page.viewportSize = { 
    width: width, 
    height: height 
}; 


page.open(args[1], function(status) { 

    console.log('phantomjs: width ' + width + ' height ' + height); 
    console.log("Status: " + status); 
    if(status === "success") { 
     page.render(args[2] + '.png'); 
    } 
    phantom.exit(); 

});

的參數的說明：

URL的網站的渲染圖像
用戶的視口

3和4的高度實際上是由JavaScript文件中計算出的用戶的視區寬度「測試的

文件名.js'按照以下建議以如下方式加載HTML：How to get height of entire document with JavaScript?

var body = document.body, 
       html = document.documentElement; 

      var height = Math.max(body.scrollHeight, body.offsetHeight, 
       html.clientHeight, html.scrollHeight, html.offsetHeight); 
      var width = Math.max(body.scrollWidth, body.offsetWidth, 
       html.clientWidth, html.clientWidth, html.offsetWidth);

任何幫助，這將不勝感激。

來源

2015-10-28 Christian Ehrig

你試過添加一個reset.css樣式表嗎？ –

我剛剛嘗試使用此https://code.google.com/p/phantomjs/source/browse/website/reset.css?r=cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1這改變了我的本地瀏覽器頁面的佈局，但phantomjs圖片保持正確一樣。 –

在玩過CSS樣式表後，我發現這個問題是通過在我的頁面上使用固定字體大小來解決的，因爲我在頁面上使用了所有元素。

很明顯，這個問題是由PhantomJS/WebKit在未明確定義時依賴'它自己的'字體大小引起的。

來源

2015-10-29 00:03:21

PhantomJS呈現的截圖比實際頁面高很多

回答

相關問題