Capturing snapshots:

There are many ways of capturing snapshots of web sites. OpenSnapr.com uses Mozilla's GtkMozEmbed widget to take snapshots. Simply OpenSnapr code opens a mozilla browser and navigates to the url. After navigation completed, it takes a screenshot of the web site.

Below you will find two different versions of the OpenSnapr code. First one uses C and the other uses Python. However both versions have some prerequisites.

Prerequisites:

  • Linux (OpenSnapr is tested with Kubuntu, but any other Linux distribution will also be ok. At this time it will not work on Windows, however we are working on it!)
  • Firefox development package. Can be installed using the following command if you use a Debian-based Linux. Also Debian package can be downloaded from here.
    apt-get install firefox-dev
  • GTK+ and GDK (Pixbuf) libraries. More info about GTK+ can be found here. For GDK-Pixbuf refer to this site.
  • gcc, make, automake, autoconf etc... (For the C version)
  • Python (For Python version)
  • PyGtkMoz: Gtk Mozilla Embed Python Bindings (For Python version)

Download

  • C Version
    OpenSnapr executable can be found in the OpenSnapr/bin directory. For installation instructions see the README under the OpenSnapr directory.
  • Python

Running

  • C Version:
    ./OpenSnapr http://www.google.com /snapshots/google.png
  • Python Version:
    python ./OpenSnapr.py http://www.google.com /snapshots/google.png

Running OpenSnapr with the above arguments will create a 200x150 screenshot of www.google.com and save it in png format.

Note that both of the above ways opens a browser window. And you shouldn't move that window. Moreover, you shouldn't open another program otherwise you will not be able to take a good screenshot. In order to overcome this complexity you can use virtual X servers like Xvfb or VNC. Both works fine. Following lines will open a virtual X using Xvfb.

$> Xvfb :1 &
$> export DISPLAY=:1.0
$> ./OpenSnapr http://www.google.com /snapshots/google.png

Displaying snapshots:

After downloading snapshots of websites, you can use OpenSnapr's free JavaScript library to display them. But you have to modify the code in order to use it. JavaScript code can be downloaded from here.

Without no modification, you can use JavaScript code to display snapshots in OpenSnapr repository. In order to use it you have to add following line between the <head> and </head> tags.

<script language="javascript" src="http://www.opensnapr.com/client/opensnapr.js"></script>

To enable snapshot pop-ups modify your sites <body> tag as follows:

<body onLoad="enableOpenSnapr()">

Bubble Images

Our JavaScript code displays bubbles when you move your mouse over a link. You can use OpenSnapr's bubbles or create your own bubbles. You can refer to our tutorial about creating bubble images with rounded corners using Gimp. Bubble Tutorial