Thumbnail preview of web page

Posted by Ariya Hidayat on November 3, 2008 · 9 comments

Would it be nice if we can see the preview of a web page before we actually visit it? Apparently browser add-ons and WordPress plugin that implement this feature do exist. Some of them rely on the server-side solution to create the preview, others do that right at the client-side. The server-side solution might be faster because it can cache some of popular web sites, however it might trouble some people who care a lot for privacy.

The example today demonstrates a nice usage of QtWebKit to generate the web thumbnail. Basically it grabs the content of the web page, renders to an image, scales the image to the intended size, and then saves the result. Could not be easier, could it?

svn checkout svn://labs.trolltech.com/svn/graphics/dojo/websnap
cd websnap && qmake && make

After it is built, an easy example would be:

./websnap www.trolltech.com trolltech.png

And then check out the output file!

Exercise for the reader: this tool renders everything and thus could be really slow for a big page (think of Digg). For a previewer, typically you just want some part of the beginning of the a very long page. Thus, the challenge is to modify the program to actually do a progressive rendering and stop if necessary.

QShare(this)

Possibly related posts:

  1. Qt Mobility 1.2 Technology Preview
  2. Qt SDK 1.1 Technology Preview released

9 comments

1 Sebastien November 3, 2008 at 9:48 pm
 

Nice. I had seen a similar “web-capture” example using Qt 4.4, but it couldn’t render Flash contents off-screen. Is it supported in 4.5? Through Netscape Plugins maybe? How would you install such thing?
Thanks

2 ariya November 4, 2008 at 1:00 pm
 

Sebastien: 4.5 supports Netscape plugins but the rendering to off-screen image will only work with windowless plugins.

3 NamShub November 4, 2008 at 2:24 pm
 

Hey I was working on a veeery similar program: http://code.google.com/p/webscreenie/

I guess I’ll just let this project die now.

4 Andre November 4, 2008 at 2:59 pm
 

Just out of curiosity, this needs QApplication, right? I’m just asking because of http://websvn.kde.org/trunk/KDE/kdebase/runtime/kioslave/thumbnail/thumbnail.cpp?view=diff&r1=199635&r2=199636

5 Sebastien November 4, 2008 at 5:13 pm
 

ariya: by windowless, you mean plugins that do not render to the page? So basically Flash will not be supported off-screen for now?

6 ariya November 4, 2008 at 5:26 pm
 

@NamShub: Why let the project die?

@Andre: Not sure about that. Surely there is no QPixmap in the code, but the network and font stuff might still require a QApplication instance.

@Sebastien: Windowed vs windowless plugin is a bit complicated to explain. To further complicate the matter, Flash supports both but not every combinations of platform and version. Also refer to e.g.http://tinyurl.com/6njq2n for some details.

7 NamShub November 5, 2008 at 1:40 am
 

Well I don’t think what the world really needs is two qtwebkit screenshot app :P

So let the one with the better name survive ;) [that would be websnap]

Seriously though I had a couple of things in mind (custom js + custom css, gui, timer) that I actually need for my job, if I can ever get flash working, so Ill just see…
Qt Webkit makes all this possible in such a snap (ouch) anyway…

8 ofigueroa November 6, 2008 at 9:31 am
 

Hi!

I’m just trying to render webpages with flash content based in a Qt open source application “CutyCapt” which can be download from http://cutycapt.sourceforge.net/

Works fine but doesn’t render flash. Some Firefox plugins (Abduction) take the same effect as CutyCapt but with the last version of Adobe Flash Player (10) for Linux I get some right snaps including Flash animations.

I compiled WebKit from svn truck but doesn’t support Flash 10, there are open bugs about in the trac.

9 Marc November 10, 2008 at 3:46 pm
 

> The server-side solution might be faster because it can cache some of popular web sites, however it might trouble some people who care a lot for privacy.

I think you got server-side and client-side mixed up there :)

Comments on this entry are closed.

Previous post:

Next post: