生成网页缩略图的DEMO

效果：

在linux服务器上通过命令行 cmd -url 的形式 抓取制定url地址的网页缩略图，保存到本地。

实现方式： Xvfb + qtwebkit

qtwebkit 代码示例：

main.cpp

#include  
#include "webmock.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QUrl url = QUrl("http://www.google.com/ncr");
    url = QUrl("http://www.sina.com.cn");
    new WebMock(url);

    return a.exec();
}

webmock.h

#ifndef WEBMOCK_H
#define WEBMOCK_H

#include  

class QWebView;

class WebMock : public QMainWindow
{
    Q_OBJECT

public:
    WebMock(const QUrl& url);

protected slots:
    void postActions();

private:
    QString jQuery; 
    QWebView *view;
};

#endif // WEBMOCK_H

webmock.cpp

#include 
#include "webmock.h"


WebMock::WebMock(const QUrl& url)
{
    QNetworkProxyFactory::setUseSystemConfiguration(true);

    view = new QWebView();
    view->load(url);

    connect(view, SIGNAL(loadFinished(bool)), SLOT(postActions()));

}

void WebMock::postActions()
{

    QWebPage *page = view->page();
    QWebFrame *frame = page->mainFrame();
    QWebElement doc = frame->documentElement();

    QWebElement elem = doc.findFirst("A");

    QSize size = frame->contentsSize();
    page->setViewportSize(size);

    QImage image = QImage(size, QImage::Format_ARGB32_Premultiplied);
    image.fill(Qt::transparent);

    QPainter p(&image);
    p.setRenderHint(QPainter::Antialiasing, true);
    p.setRenderHint(QPainter::TextAntialiasing, true);
    p.setRenderHint(QPainter::SmoothPixmapTransform, true);

    QPen pen(Qt::green, 2, Qt::DashDotLine, Qt::RoundCap, Qt::RoundJoin);
    p.setPen(pen);

    frame->render(&p);

    QRect rect = elem.geometry();
    p.drawRect(rect);

    p.end();

    image.save("./webpage.jpg");

    this->close();

}

项目文件 test.pro

QT       += core webkit network


SOURCES += main.cpp \
    webmock.cpp

HEADERS += \
    webmock.h

通过qmake编译完毕之后， 运行，系统提示 cannot connect to x server。

现在需要使用 xvfb。

命令：nohup /usr/bin/Xvfb :1 -screen 0 1024x768x8 & 启动。（:1 定义屏幕ID width*height*depth 8 16 24 etc）

然后：DISPLAY=:1 ./test （屏幕ID1 执行 test）

运行 编译好的可执行文件 test。 即可在运行目录下得到 网页截图 webpage.jpg。

彩蛋：

    QWebElement elem = doc.findFirst("A");
    //some other code

    QRect rect = elem.geometry();
    p.drawRect(rect);

4.7提供的QWebElement接口中的 findXXX 方法 提供了 基于标准 CSS3 的 selector 语法。只给对DOM的操作提供了很大的便利。

以上代码的作用稍作扩展，就可以实现：查询的关键字或者文段或者区块在保存的图片中高亮标记的功能。

从这里出发，可以粗略实现google的缩略图功能：

当然，gg并没有在生成图片的时候高亮标记，而是记录文段的位置在web前端用css+js实现了标志。

有空再来研究这个功能。

References：

http://dadicy.wordpress.com/tag/xvfb/

http://www.x.org/releases/X11R7.6/doc/man/man1/Xvfb.1.xhtml

http://corpocrat.com/2008/08/19/how-to-install-xvfb-x11-server-in-linux-server/

http://semicomplete.com/blog/geekery/xvfb-firefox.html

http://www.xxlinux.com/linux/article/accidence/install/20100330/18150.html

http://www.mysql-apache-php.com/website_screenshot.htm

本 作品采用 知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。