使用phantomjs獲取chrome瀏覽器中的url的屏幕截圖

我試圖獲取某些url的屏幕截圖並使用phantomjs將其顯示在chrome瀏覽器中。我怎麼做？任何幫助將不勝感激，但沒有任何顯示在網頁上。這就是我的代碼的外觀。使用phantomjs獲取chrome瀏覽器中的url的屏幕截圖

<!DOCTYPE html> 
<html> 
    <head> 
     <title>WSST</title> 
     <script type="text/javascript"/> 
     var URLS = ["https://google.com", 
      "http://www.bing.com/", 
      "https://www.yahoo.com/", 
      "https://www.npmjs.com/package/phantomjs-html", 
      "" 
      ] 

var SCREENSHOT_WIDTH = 1280; 
var SCREENSHOT_HEIGHT = 900; 
var LOAD_WAIT_TIME = 5000; 

var getPageTitle = function(page){ 
    var documentTitle = page.evaluate(function(){ 
     return document.title; 
    }) 
    console.log("getting title:", documentTitle) 
    return documentTitle; 
} 

var getPageHeight = function(page){ 
    var documentHeight = page.evaluate(function() { 
     return document.body.offsetHeight; 
    }) 
    console.log("getting height:", documentHeight) 
    return documentHeight; 
} 

var renderPage = function(page){ 

    var title = getPageTitle(page); 

    var pageHeight = getPageHeight(page); 

    page.clipRect = { 
     top:0,left:0,width: SCREENSHOT_WIDTH, 
     height: pageHeight 
    }; 
    page.render("d:/screenshots/"+title+".png"); 
    console.log("rendered:", title+".png") 
} 

var exitIfLast = function(index,array){ 
    console.log(array.length - index-1, "more screenshots to go!") 
    console.log("~~~~~~~~~~~~~~") 
    if (index == array.length-1){ 
     console.log("exiting phantomjs") 
     phantom.exit(); 
    } 
} 

var takeScreenshot = function(element){ 

    console.log("opening URL:", element) 

    var page = require("webpage").create(); 

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

    page.open(element); 

    console.log("waiting for page to load...") 

    page.onLoadFinished = function() { 
     setTimeout(function(){ 
      console.log("that's long enough") 
      renderPage(page) 
      exitIfLast(index,URLS) 
      index++; 
      takeScreenshot(URLS[index]); 
     },LOAD_WAIT_TIME) 
    } 

} 

var index = 0; 

takeScreenshot(URLS[index]); 
     </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>

來源

2017-01-03 Vikas

您無法使用瀏覽器端JavaScript運行PhantomJS。

爲了做到這一點，你需要在你的網絡服務器上運行PhantomJS（使用你鏈接的任何服務器端語言，Phantom已經綁定了很多，包括通過Node.JS的JavaScript）。

你的客戶端代碼，然後可以將圖像元素進入頁面：

var page_to_show = URLS[index]; 
var image_url = "http://example.com/myPhantomWrapper?page=" + encodeURIComponent(page_to_show); 
var image = document.createElement("img"); 
image.src = image_url; 
document.body.appendChild(image);

你的服務器端代碼，然後可以從查詢字符串的URL，並使用PhantomJS生成圖像，然後返回圖像在HTTP響應中。

來源

2017-01-03 07:19:33 Quentin

@Vikas - 步驟1：選擇一種編程語言。第2步：學習使用該語言進行服務器端編程。步驟3：找到它的PhantomJS綁定。第4步：閱讀這些綁定的文檔 – Quentin

使用phantomjs獲取chrome瀏覽器中的url的屏幕截圖

回答

相關問題