Phantomjs - 截取網頁的屏幕截圖

我有一個網址（例如http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4），並希望截取它並在我的網頁上預覽它。意思是，用戶點擊預覽按鈕，PhantomJS需要預覽網頁爲PNG/JPEGPhantomjs - 截取網頁的屏幕截圖

我也可以使用任何其他開源。

來源

2013-06-19 Abhiram Sampath

我打算假設您安裝了Phantomjs並在您的.bashrc中創建了一個別名，或者已經更新了您的系統路徑來調用Phantomjs二進制文件。如果沒有，你需要仔細閱讀一些初學者教程：http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

一旦你完成了設置，你將需要編寫一個簡單的JavaScript文件，你將在終端中調用（或者如果你使用的是Windows的shell）。我將在下面提供一個簡單的示例腳本。

var WebPage = require('webpage'); 
page = WebPage.create(); 
page.open('http://google.com'); 
page.onLoadFinished = function() { 
    page.render('googleScreenShot' + '.png'); 
    phantom.exit();}

然後保存你的js文件。打開您的終端或外殼並運行以下內容

phantomjs yourFile.js

就是這樣。檢查你調用js文件的目錄，你應該有一個帶有你的網頁屏幕截圖的png文件。

這非常簡單，並且有很多關於phantomjs的注意事項，但是這與我可以做到的基本相同。如果您需要phantomjs的其他食譜，請嘗試查看這些示例腳本：https://github.com/ariya/phantomjs/wiki/Examples

來源

2013-06-19 16:59:01 cliffbarnes

如果有人認爲這...如何使用這個方法來保存的HTML頁面的屏幕截圖，並將我在本地創建？ – Chris

@Chris如果你運行的是本地服務器，你應該能夠導航到'http：// localhost'或者你從哪裏提供服務。它的工作原理完全一樣，因爲瀏覽器通常不關心給定服務器的位置。如果您沒有運行本地服務器，請嘗試使用文件協議導航到文件的絕對路徑，例如'file：/// path/to/file.html' – acobster

@acobster我在實習期間已經離開了那個項目一段時間。但感謝你的努力，特別是在這個新的一年裏！ – Chris

上述答案適用於基本用法，但PhantomJS並不知道是否所有的AJAX請求都已加載。我製作了url-to-image來解決這個問題。

npm install url-to-image

寫screenshot.js

var screenshot = require('url-to-image'); 
screenshot('http://google.com', 'google.png').done(function() { 
    console.log('http://google.com screenshot saved to google.png'); 
});

運行腳本node screenshot.js

來源

2014-03-06 22:57:00 Kimmo

Hi @Kimmo我可以在這裏設置高度，寬度或useragent嗎？ –

@MohitArora是的，你可以設置寬度和高度。文檔非常糟糕，根本沒有提及選項。我在https://github.com/kimmobrunfeldt/url-to-image#api中添加了詳細的使用示例 – Kimmo

這真棒。 'npm i -g url-to-image; urltoimage http：// localhost：3000〜/ Desktop/foo.jpg' 最後是整頁圖像。對於上帝的愛請包裝這是一個實用的Chrome擴展！ – corysimmons

Phantomjs - 截取網頁的屏幕截圖

回答

相關問題