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

问题描述

我有一个网址（例如 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/

一旦你完成了这个设置，你需要写一个简单的您将在终端（或shell，如果您使用的是Windows）中调用的javascript文件。我将在下面提供一个简单的示例脚本。

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的其他配方，请尝试查看以下示例脚本： 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屋！