How to take screenshot of complete webpages?

Question

I have used shutter and screenshot applications for a long time for taking screenshots.But they can only take screenshots as big as the physical screen.

Sometimes I have to take an screenshot of an whole webpage,because the page can't be saved properly by the browser or I want to include pop-up's as well.This situation requires a software that can take a screenshot longer than the physical screen.

Is there any software to do this?

Note that this question and it's answers are about webpage saving apps.They won't save pop-up's, which is essential in my case.I don't want a converter.I need an literal screenshot app or anything that could save the pop-up's as well.

And I use Mozilla Firefox, because it has really nice plugins.The solution should be working fot Firefox itself.

Answer 1

On recent versions of Firefox, there is no need for any plugins. This capability is built into the browser.

New Method with the Mouse

Very simple: right click anywhere on the page that is not otherwise active, and select “Take Screenshot”. The popup which appears will allow you to select a region of the visible page, or the complete webpage.

Console Method

1. In Firefox, use Ctrl+Shift+F2 to open the Web Developer Console. (The exact key combination may depend on your settings.)
2. Type :screenshot --fullpage (this will autocomplete, so :s Tab --fullpage will work).

That will save the screenshot as a PNG file to your downloads folder. By default, the filename includes the date and time. You can use a different filename if you wish, simply by passing it in on the CLI: :screenshot --fullpage my_name.png.

This will also work on pop-up windows, but each window will need to be saved individually. I know of no way to combine them into a single screenshot. (You could, of course, do that in GIMP or another image-editing tool later.)

Answer 2

Here a list of applications that you can use from terminal:

• wkhtmltopdf (source)

wkhtmltopdf is a command line utility that converts html to pdf using webkit rendering engine.

sudo apt-get install wkhtmltopdf

• wkhtmltoimage (source)

The wkhtmltoimage utility shall take the screenshot of a given url, and save it as a png image. It uses the webkit rendering engine.

Download : http://code.google.com/p/wkhtmltopdf/downloads/list

Usage :

To use the wkthmltoimage utility simple run the command from terminal, giving the url and the name for the image file.

$ ./wkhtmltoimage-amd64 http://www.google.com google.png

It will create google.png in home directory with the screenshot of www.google.com

Other options :

wkhtmltoimage provides many options to customise the screenshot. Some examples are as follows :

Quality - Controls the quality/compression of the generation image. Default is 94

$ ./wkhtmltoimage-amd64 --quality 50 http://www.google.com google.png

Disable images

$ ./wkhtmltoimage-amd64 --no-images http://www.google.com google.png

Disable javascript

$ ./wkhtmltoimage-amd64 --disable-javascript http://www.google.com google.png

Crop the screenshot

$ ./wkhtmltoimage-amd64 --crop-h 300 --crop-w 300 --crop-x 0 --crop-y 0 http://www.google.com googl

• cutycapt (source)

Cutycapt is a utility to take the screenshot of a url, using the webkit rendering engine and save it to an image file.

Install

sudo apt-get install subversion libqt4-webkit libqt4-dev g++ cutycapt

Usage To use cutycapt, simply run the command from the terminal, providing the url and the name for the output file.

$ cutycapt --url=http://www.google.com/ --out=google.png

It will create google.png file in home directory which would have the screenshot of www.google.com

• khtml2png (source)

khtml2png uses the konqueror rendering engine to create screenshots of web pages.

Download

http://khtml2png.sourceforge.net/index.php?page=download

Install

To install khtml2png, the program has to be compiled and build on the system.

sudo apt-get install kdelibs4-dev zlib1g-dev g++ cmake
Extract the khtml2png archive.
./configure
make
sudo checkinstall (this will create a deb file and install it , so that it can easily uninstalled later)

Usage To use khtml2png run the program from commandline providing the url and other options.

$ khtml2png2 --width 800 --height 600 http://www.google.com/ google.png

This would create a google.png in home directory with the screenshot of www.google.com.

• PyWebShot (source)

Pywebshot uses python bindings embedded mozilla ( http://www.mozilla.org/unix/gtk-embedding.html )

Install

sudo apt-get install python-gtkmozembed

Download pywebshot from https://github.com/coderholic/PyWebShot

Usage :

$ python pywebshot.py www.google.com -t 1024x768&lt;br /&gt;<br />Loading www.google.com... saved as www.google.com.png

It should create a www.google.com.png in the directory which has the screenshot of size 1024 x 768.

Answer 3

I tried Awsome Screenshot: Screen Capture Annotate - A Chrome Plugin. It worked pretty well for me. Captured the Pop-Ups(jQuery Based)[Not the Alerts], Full Page Capture and worked with HTTPS too!! Great tool.

Answer 4

For anyone who came here looking for a CLI option: There is no need for any other tool, latest version of both chrome and firefox have inbuilt abilities.

Chrome

/path/to/chrome --headless --screenshot="img.png" "www.stackoverflow.com"

FireFox

/path/to/firefox -screenshot img.png www.stackoverflow.com

That's it.

Answer 5

On firefox you can use a addon called Awsome Screenshot Capture plus

Answer 6

If you're on Chrome, you can use Screen Capture extension which supports full page screenshots. Note that it may sometimes not work with HTTPS enabled pages.