Screenshot Tools to Capture Scrolling Windows

If you're using Firefox you can use the dev console to capture a screeshot of an entire web page. Use Shift+F2 to open the dev console. The basic command for capturing an entire webpage looks like this:

screenshot fileName --fullpage  

Which will save a screenshot of the entire webpage as fileName.png in your Downloads folder. This will be huge and some photo viewers can't handle it, but it has good quality. If you'd rather copy the screenshot to your clipboard you can use this command:

screenshot --clipboard --fullpage

You can also set a delay (in seconds):

screenshot fileName --delay seconds --fullpage

This feature has been discussed many times, for example at Ubuntuforums, but there aren't really any perfect solutions apart from the workarounds listed on that forum, as none of the screenshot applications for Linux based systems seem to have the desired functionality.

However, it appears that Shutter can capture tall, scrolling webpages (and local file:/// locations) if you install the necessary plugin:

sudo apt-get install gnome-web-photo

Then restart shutter, click the globe to get this dialog and then enter the desired url.

In the resulting tall webpage further below I've tried to reduce the image quality and size a bit (it's just 31kb now).

You can also use this website screenshot feature for local uris such as file:///home/mike/bin but you only get a list view of the files, but a tall one at that. This may be of some use for you, but it probably isn't ideal.

Shutter doesn't currently support taking scrolling screenshots of your files in your file manager's windows, although the developer is said to be targeting 0.90 as the release that will include the new functionality, as noted at Launchpad. However, it doesn't seem to be in the latest release. There seems to be problems in implementing the functionality, as the developer notes that there are still 'several unsolved problems':

1) The scrolling is not the same in all application, e.g. firefox scrolls 50px and nautilus 35px when you use the mouse wheel
2) How to detect the last screenshot to take? I've a partly working solution here by comparing the screenshots...

It is a useful feature and one I will research further to see how it could be implemented, although at least scrolling webpages (as below) can be captured in Shutter with the gnome-web-photo plugin.

I'm using this awesome browser plugin.

http://awesomescreenshot.com

Restrictions: Capture web pages only.

Capture

• Capture visible part
• Capture any region
• Capture the whole page
• Crop any portion and show crop dimension

Annotate

• Annotate it with rectangles, circles, arrows, lines and text
• Erase the sensitive information with blur tool

Share

• One-click Upload the screenshot to awesomescreenshot.com and get a sharable link
• Hard to guess URL to allow private sharing
• Share the link to twitter, facebook, email etc.

Method one: using add-ons.

If you are now using Chrome, you can use WebPage Screenshot Chrome extension to save full web page. If what you are using is Firefox, just install Screengrab Firefox extension.

Method two: using online screenshot tools.

There exists many webpage capture tools for you to capture scrolling windows such as Webpage Screenshot Capture, Screenshots, Capturefullpage, etc. Using these web tools to capture scrolling windows is simple, just copy the URL and paste it in the bar, then you can save the window as image format.

This Chrome extension works well for capturing the entire webpage.

https://gofullpage.com/

I use globe in Shutter, as user76204 has mentioned.

But globe in Shutter is quite an awkward instrument. Because sometimes I need a screenshot of a webpage that only partially not place on screen. I found an alternative. I reduce zoom of the webpage in the browser to make a screenshot of larger webpage size.

For enabling globe in Shutter in Ubuntu 18.04 see the answer here How to enable globe in Shutter in Ubuntu 18.04?

I use miro.com because have a nice Chrome Extension and smooth workflow.

The extension allows you to choose to which miro.com account you will upload. It also lets you pick whether you want the full page (scrolled) or a visible area or a selected area. And of course miro makes it easy to edit and archive or share afterwards.

I wrote a little program to help achieve this.

First, capture your screenshots, scrolling manually. They must be of the exact same width. The current image may have some overlap with previous image. Or, it has no overlap. The program will find the overlaps and stitch them together.

Save this program as: stitch-images.py

import cv2
import numpy as np
import matplotlib
matplotlib.use('TKAgg')
from matplotlib import pyplot as plt

# **** Print list of screenshot files sorted by time
import glob
prefix = 'home/yky/Pictures/Screenshots/'
files = glob.glob(prefix + "*.png")
files.sort()
for i, fname in enumerate(files):
    if i % 2:
        print(end="\x1b[7;32m")
    else:
        print(end="\x1b[0m")
    print("%2d %s" %(i, fname[len(prefix):]))
print(end="\x1b[0m")
seq = list(map(int, input("Enter file sequence [eg. 4,5,6,7]: ").split(',')))
print()

# **** Find the positions to stitch the images
rowses = []             # the heights of each image
bottoms = []            # the "skipped" amount for each image
img1 = None
for i in seq:
    img2 = cv2.imread(files[i])
    print("filename =", files[i])
    if img1 is None:
        img1 = img2
        rows1, cols1, _ = img1.shape
        print("img1 size = %d x %d"% (rows1, cols1))
        rowses.append(rows1)
        bottoms.append(0)
        continue
    
    if img1.shape[1] != img2.shape[1]:
        print("images are different widths")
        exit(0)

    rows2, cols2, _ = img2.shape
    print("\timg2 size = %d x %d"% (rows2, cols2))
    rowses.append(rows2)

    # **** This is the "matching template"
    # which is created from the last 15 rows of img1
    # the left and right 10 pixels are cut off to allow for edge align error
    tmp = img1[(rows1 - 15) : rows1, 10 : cols1 - 10]       # format: [y1:y2, x1:x2]
    h, w, _ = tmp.shape
    print("\tmatching template size = %d x %d"% (h, w))

    img = img2.copy()                   # a copy of the image, for display

    # **** Use OpenCV's template matching function.  Please refer to its documentation.
    method = eval('cv2.TM_CCOEFF')      # 'cv.TM_CCOEFF_NORMED', 'cv.TM_CCORR', 'cv.TM_CCORR_NORMED', 'cv.TM_SQDIFF', 'cv.TM_SQDIFF_NORMED'
    res = cv2.matchTemplate(img2, tmp, method)
    min_val, max_val, min_loc, max_loc = cv2.minMaxLoc(res)         # Pick the best match
    # If the method is TM_SQDIFF or TM_SQDIFF_NORMED, take minimum
    if method in [cv2.TM_SQDIFF, cv2.TM_SQDIFF_NORMED]:
        top_left = min_loc
    else:
        top_left = max_loc
    bottom_right = (top_left[0] + w, top_left[1] + h)
    cv2.rectangle(img, top_left, bottom_right, 255, 2)      # draw the found region in red
    bottom = bottom_right[1]
    print("\tFound: bottom location =", bottom)
    if bottom >= 200:
        bottom = 0
        print("\t**** Position too low, bottom assumed = 0")
    bottoms.append(bottom)                                  # keep a record of it

    # **** Show the aligned image in a new window
    # plt.subplot(121),plt.imshow(res, cmap = 'gray')
    # plt.title('Matching Result'), plt.xticks([]), plt.yticks([])
    plt.imshow(img, cmap = 'gray')
    plt.title('Detected fragment'), plt.xticks([]), plt.yticks([])
    plt.show()
    
    img1 = img2             # Let img1 := current image; repeat
    rows1 = rows2
    cols1 = cols2

# **** Finally, combine images together:
# create empty matrix:
scroll = np.zeros((sum(rowses) - sum(bottoms), cols1, 3), np.uint8)

rows1 = 0
for (i, rows, bottom) in zip(seq, rowses, bottoms):
    img = cv2.imread(files[i])
    scroll[rows1 : rows1 + rows - bottom, :cols1, :3] = img[bottom : rows, 0 : cols1]
    rows1 += rows - bottom

cv2.imwrite("scroll.png", scroll)
print("\nResult written to `scroll.png`, bye.")

Run it with python3 stitch-images.py. It will display the files in your /Pictures/Screenshots/ directory. But you have to edit your home directory in line 9. Then enter the file numbers, eg. "4,5,6,7,8,9". Then it will show you the overlapping segments in a pop-up window. Close the windows if they look OK to you.

By the way, you need to install various libraries, something like this：

sudo apt install python3-opencv
pip3 install numpy
pip3 install matplotlib
sudo apt install python3-tk

You may wish to tweak some details for your preference. Hope it's helpful. Enjoy :)

By the way, current open-source software sucks. We should form a DAO to re-write Linux using a for-profit business model while keeping it open-source :)