Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonys-code-base/c54613ed1604e6de08835a1edbda07ad to your computer and use it in GitHub Desktop.
Save tonys-code-base/c54613ed1604e6de08835a1edbda07ad to your computer and use it in GitHub Desktop.
Hitchhiker's Guide to Scrolling Screen Captures

HitchHiker's Guide to Scrolling Screen Captures

head_line_image

This article describes methods for capturing long/scrolling screenshots on Android/Windows.

When it comes to capturing scrolling/long web pages, most modern web browsers allow you to save a page for offline viewing. This method doesn't always produce the expected output. Some of the rendered content is occasionally omitted from the offline copy. You may also find that the layout format is not preserved.

Then we come to scrolling apps. What if we had need to capture the first few pages of an app's display output on an Android phone (for example, the first couple of screens from Facebook or Twitter app)? Depending on your phone or Android OS version, you may already have the option to take scrolling screenshots via the Screenshot Toolbar, but this method can be cumbersome.

This article covers:

  • Using Yandex Web browser with Chrome extension Fireshot on Android to capture scrolling web pages
  • Android Scrolling Captures from within an App (using LongShot)
  • Using Android's native Screenshot Toolbar (if your phone and Android OS support this option)
  • Windows scrolling captures that contain static regions and scrollbars

Android Scrolling Web Page Capture using Yandex Browser and Fireshot Extension

On Android, browser-based extension support is limited. The current Android version of the Chrome browser does not support extensions from Chrome Web Store. Firefox for Android does support a subset of its full add-on suite, and on some occasions, these don't always function as expected. Kiwi browser offers support for Chrome extensions, but did not seem to work with Fireshot.

One combination that did work well, was Yandex Web browser using Extension, Fireshot.

This method was tried, tested, and worked. It will be described next.

  1. From the Google Play Store, install Yandex Browser with Play Protect
  2. Once complete, open Yandex browser then head to the Chrome Web Store to search for and install Fireshot. This link must be accessed from within the Yandex browser
  3. While still in the browser, navigate to the web page that you want to capture. Lifewire is used in the example below. Once the page has fully loaded, click on the 3 vertical dots at the bottom right hand corner

123

  1. Click on "Extensions"
  2. Select "Fireshot - Capture page"
  3. Select "Capture entire page"

456

The web page will auto-scroll on the screen during the capture process.

  1. Once the extension has done its thing, you will be given the option to save the capture as an image or PDF. Choose the format you require.
  2. To view the captured output, use your file manager to navigate to default location of capture files, /sdcard/Downloads/FireShot/
  3. Open the file to see the fully captured web page

789

Android Scrolling Capture using LongShot

Several Apps are readily available in the PlayStore that allow you capture scrolling an entire web page and/or from within an app.

LongShot is one of the apps that is available and supports scrolling screenshots.

The method for taking a scrolling capture from within an app, using LongShot, is outlined below.

  • Download LongShot from the Google PlayStore
  • After installation, navigate to your phone's "Accessibility Settings"
  • Grant LongShot access to automatically scroll

01_02_03

LongShot also requires permission to "Draw over other apps".

  • Locate the "Draw over other apps" setting. This varies by OS/Phone model
  • Enable the option for "LongShot"
  • Open LongShot
  1. Select "Autoscroll"
  2. Click on the Shutter button/icon
  3. Click "Start Now"

04_05_06

  • You should now be able to see the LongShot screen dock, which consists of two buttons, a green (Start Capture) and red ("Cancel Capture")
  • Open up the application for which you want to take a scrolling capture from (in the example below, Google PlayStore is used)
  • Once your app has loaded, click on LongShot's docked, green ("Start") button. The capture should start and you should see the app auto-scrolling on the screen
  • Once you've captured all the content you require, you can tap above the horizontal red line, which appears on the screen

07_08_09

  • LongShot should now show the final captured output, with the option to save
  • Clicking "Save" places the scrolling capture image at location /sdcard/longshot

10_11

Android Scrolling Capture using Native Functionality

Depending on your Android OS and/or Phone type, you may have the option to use the native method without the need to install any additional apps/extensions

This basically involves the following (this example is for a Samsung S10 running Android 10):

  1. Go to "Advanced Features" Settings and select "Screenshots and screen recorder"
  2. Enable "Screenshot toolbar"
  3. Go to the page/app you want that you want to capture from
    • Take a normal screenshot by simultaneously pressing the volume down and power buttons
    • The "Screenshot toolbar" will appear at the bottom of the screen
    • Before the toolbar disappears, you will need to click on the scroll icon, located on the toolbar (pointed to by the arrow in the image below)
    • As each scroll completes, click on the scroll icon again until you've captured all the areas you require

123

Windows OS and Scrolling Captures

There's no rocket science involved in capturing an entire web page from your Windows 10 browser. The Fireshot Extension/Add-on discussed previously, is available for Firefox and Chromium based browsers. If you use Firefox, then depending on the version you're running, you might already have the option to save entire pages via right-click context menu.

12

Browser-based methods, however, do not include static areas, i.e. the browser's address bar, tabs, toolbar. They also do not include the browser's scrollbar.

You will find a long list of Windows applications that support scrolling captures/regions with several online resources outlining their usage for a range of scenarios.

Some of these products include:

After trialing all the above, with a focus on scrolling captures that contain static regions, I had various levels of success. The one product that worked on most sites and Windows apps that I visited/used, was FastStone Capture. As such, I'll describe the process using this package.

Scrolling Captures that Contain Static Regions (using FastStone)

FastStone can be downloaded and installed from FastStone Capture. Download the 30 day trial, which will give you enough time to evaluate the product.

The following steps describe the process for taking a scrolling capture, which includes all static regions and the scrollbar.

Referring to the image below:

  1. Start FastStone, and from the FastStone Capture dock, click the scrolling capture icon
  2. Hold down the CTRL key
  3. While holding down CTRL, crosshairs should appear. Use your mouse to select the entire browser window, and once done release mouse button and CTRL key
  4. Click the browser's scrolldown button once
  5. You should now see the page auto-scroll on the screen. Once scrolling has gone past the point of the region/pages you want captured, hit Escape to end the capture at the current point, or for a full page capture, wait until the whole capture is complete. You will automatically be prompted for a save location once capturing is done.

2020-05-15_143727

Final Notes

As mentioned earlier, there are many products out there that support scrolling captures. The best way to find the right package that suits your requirements, is to try it out.

Also as stated earlier on, the Native Android method described can be cumbersome where the capture spans beyond a couple of scrolls. It requires that you continually monitor the screen and tap the scroll icon in the "Screenshot toolbar" for the capture ro continue.

Note that the Yandex browser has its origins from Russia. I'd recommend adjusting preferences/settings after install to reflect your region and language translation features, if need be.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment