Phantomjs - 截取网页截图 [英] Phantomjs - take screenshot of a web page

问题描述

我有一个 URL(例如 http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4)并且想要截取它并在我的网页上预览.意思是，用户点击预览按钮，PhantomJS 需要将网页预览为 PNG/JPEG

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

我也可以使用任何其他开源软件.

I'm ok with using any other open source too.

推荐答案

我假设你已经安装了 Phantomjs 并在你的 .bashrc 中创建了一个别名，或者已经更新了你的系统路径来调用 Phantomjs 二进制文件.如果没有，您需要仔细阅读一些初学者教程:http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

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/

设置完成后，您需要编写一个简单的 javascript 文件，您将在终端(或 shell，如果您使用 Windows)中调用该文件.我将在下面提供一个简单的示例脚本.

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.

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

然后，保存您的 js 文件.打开终端或 shell 并运行以下命令

Then, save your js file. Open up your terminal or shell and run the following

phantomjs yourFile.js

就是这样.检查您调用 js 文件的目录，您应该有一个带有网页屏幕截图的 png 文件.

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.

这非常简单，使用 phantomjs 有很多注意事项，但这是我能做到的最基础的.如果您需要 phantomjs 的其他配方，请尝试查看以下示例脚本:https://github.com/ariya/phantomjs/wiki/示例

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 - 截取网页截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！