网页使用phantomjs lib捕获并保存到图像

时间:2013-03-20 13:48:56

标签: javascript image converter webpage capture

我正在搜索谷歌获取任何js lib,可以捕获任何网站或网址的图像。我开始知道phantomjs库可以做到这一点。在这里,我得到了一个小代码,捕获并将github主页转换为png图像

如果有人熟悉phantomjs那么请告诉我这行的含义是什么

var page = require('webpage').create();

这里我可以提供任何名称而不是网页?

如果我需要捕获任何网页的部分,那么我该如何在这个库的帮助下完成它。任何人都可以指导我。

var page = require('webpage').create();
page.open('http://github.com/', function () {
    page.render('github.png');
    phantom.exit();
});

https://github.com/ariya/phantomjs/wiki

感谢

2 个答案:

答案 0 :(得分:1)

这是一个用于抓取图像的简单的phantomjs脚本:

var page = require('webpage').create(),
system = require('system'),
address, output, size;


address = "http://google.com";
output = "your_image.png";
page.viewportSize = { width: 900, height: 600 };

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            page.render(output);
            console.log('done');
            phantom.exit();
        }, 10000);
    }
})

其中..

'address'是您的网址字符串。

'output'是您的文件名字符串。

也是'宽度'和'height'是要捕获的站点区域的维度(如果您想要整个页面,请将其注释掉)

要从命令行运行此命令,请将上面的内容保存为'script_name.js并触发幻像,使js文件成为第一个参数。

希望这会有所帮助:)

答案 1 :(得分:1)

你问的问题:

var page = require('webpage').create();

据我所知,该行做了3件事:它添加了一个模块require('webpage'),然后在PhantomJS .create()中创建一个WebPage对象,然后将该对象分配给var = page

名称“网页”告诉它要添加哪个模块。

http://phantomjs.org/api/webpage/

我也需要一种方法来使用page.render()来捕获网页的一个部分,但我看不到一种简单的方法。按ID选择页面元素并根据它的大小呈现该元素会很好。他们应该为下一版本的PhantomJS添加它。

目前,我唯一的解决方法是在我的网址http://example.com/page.html#element中添加一个锚标记,以使页面滚动到我想要的元素,然后设置一个接近我需要的大小的宽度和高度

我最近发现在渲染之前我可以稍微操作页面,所以我想尝试使用这种技术来隐藏除了我想要捕获的其他元素之外的所有其他元素。我还没试过,但也许我会取得一些成功。 请参阅此页面,了解他们如何使用querySelector()https://github.com/ariya/phantomjs/blob/master/examples/technews.js