Question

我正试图获取一些网址的屏幕截图，并使用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>

Answer 1

您无法使用浏览器端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响应中返回该图像。

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

1 个答案: