CODEWITHSUNDEEP
htmlphantomjs
Vikas
Vikas

Reputation: 141

get the screenshots of the urls in the chrome browser using phantomjs

I'am trying to get the screen shots of some of the urls and display it in the chrome browser using phantomjs. How do i do it??any help would be appreciated.But nothing is getting displayed on the webpage. this is how my code looks.

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

Upvotes: 0

Views: 80

Answers (1)

Quentin
Quentin

Reputation: 943100

You can't run PhantomJS using browser side JavaScript.

In order to do this you need to run PhantomJS on your webserver (using whatever server side language you link, Phantom has bindings for many, including JavaScript via Node.JS).

Your client side code can then insert an image element into the page:

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);

Your server side code can then get the URL from the query string and use PhantomJS to generate an image, then return that image in the HTTP response.

Upvotes: 2

Related Questions