jQuery Phantomjs - 截取网页截图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17189745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Phantomjs - take screenshot of a web page
提问by Abhiram Sampath
I have a URL (for e.g. http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4) and want to take a screenshot of it and preview it on my web page. Meaning, the user clicks on the preview button and PhantomJS needs to preview the web page as PNG/JPEG
我有一个 URL（例如http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4），想截取它的屏幕截图并在我的网页上预览它。意思是，用户点击预览按钮，PhantomJS 需要将网页预览为 PNG/JPEG
I'm ok with using any other open source too.
我也可以使用任何其他开源。
回答by cliffbarnes
I am going to assume you have installed Phantomjs and have created an alias in your .bashrc or have updated your system path to call the Phantomjs binaries. If not, you need to peruse a few beginner tutorials: http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/
我假设你已经安装了 Phantomjs 并在你的 .bashrc 中创建了一个别名，或者已经更新了你的系统路径来调用 Phantomjs 二进制文件。如果没有，你需要仔细阅读一些初学者教程：http: //net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/
Once you have that set up, you will need to write a simple javascript file that you will call in the terminal (or shell, if you are using Windows). I will provide a simple, example script below.
完成设置后，您将需要编写一个简单的 javascript 文件，您将在终端（或 shell，如果您使用的是 Windows）中调用该文件。我将在下面提供一个简单的示例脚本。
var WebPage = require('webpage');
page = WebPage.create();
page.open('http://google.com');
page.onLoadFinished = function() {
page.render('googleScreenShot' + '.png');
phantom.exit();}
Then, save your js file. Open up your terminal or shell and run the following
然后，保存您的 js 文件。打开你的终端或 shell 并运行以下命令
phantomjs yourFile.js
That's it. Check the directory where you called the js file and you should have a png file with a screen shot of your web page.
就是这样。检查您调用 js 文件的目录，您应该有一个带有网页屏幕截图的 png 文件。
This is very simple and there are a lot of caveats to f-ing with phantomjs, but this is about as basic as I can make it. If you need other recipes for phantomjs, try looking at these example scripts: https://github.com/ariya/phantomjs/wiki/Examples
这非常简单，使用 phantomjs 有很多注意事项，但这是我所能做到的基本。如果您需要 phantomjs 的其他配方，请尝试查看这些示例脚本：https: //github.com/ariya/phantomjs/wiki/Examples
回答by Kimmo
The above answer is fine for basic usage but PhantomJS doesn't know if all AJAX requests have been loaded or not. I made url-to-imageto help with this problem.
上面的答案适用于基本用法，但 PhantomJS 不知道是否所有 AJAX 请求都已加载。我制作了url-to-image来帮助解决这个问题。
npm install url-to-imageWrite 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'); });- Run script
node screenshot.js
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
