phantomjsを使用してクロムブラウザのURLのスクリーンショットを取得

いくつかのURLのスクリーンショットを取得し、phantomjsを使用してクロムブラウザに表示しようとしています。どのようにすればいいですか？どんな助けもありがとうございます。しかし、ウェブページには何も表示されていません。これは私のコードの外観です。phantomjsを使用してクロムブラウザの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を実行することはできません。

これを行うには、Webサーバー上で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を使用してクロムブラウザのURLのスクリーンショットを取得

答えて

関連する問題