使用PhantomJS在Chrome浏览器中获取网址的屏幕截图

我正在尝试获取某些网址的屏幕截图，并使用phantomjs在chrome浏览器中显示它。我该怎么做？？任何帮助将不胜感激。但是网页上没有显示任何内容。这就是我的代码的外观。

<!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>

你不能使用浏览器端的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 响应中返回该图像。

相关内容

最新更新

热门标签：