Create an image or print a webpage larger than the screen from a web browser

4

2

Q:

How can I create an image or print a webpage larger than the screen from a web browser? Since I can't enlarge my window beyond my screen, I am limited by the screen I use:

enter image description here

I would like to make a very large print, with lots of details, as if I had a very large screen.

Why this new question?

Most questions on the topic:

merely address the specific case of Google Maps, or require specific third party software, or have silly answers such as «expand your window», not withstanding that it is simply not an option in most scenarios. And what about the moon?

Furthermore, there is no general question nor answer which addresses:

  1. Create an image or export only the part you need
  2. Screen resolution independent solution which does not go through a screen shot
  3. No software purchase which may or may not work on your platform
  4. Create an image or print a webpage larger than the screen from a web browser
  5. Any website, any size

SwiftArchitect

Posted 2017-04-12T08:01:01.897

Reputation: 241

To add a clarification on what is unique here, some web pages contain a mechanism for rendering a window on a huge virtual image. The size of the window is defined by available screen real estate, and then that is how much of the image is displayed. The underlying virtual image can be scrolled or dragged to reveal more. The virtual image may not even exist as a single large image, but the area of interest can be assembled as needed. Most screen capture methods will capture what is displayed, but do not give you access to the underlying virtual image. (cont'd) – fixer1234 – 2017-05-08T06:18:40.733

What is described here is more than just capturing the existing page, including offscreen portions viewable by scrolling. It's defining a virtual canvas. The page rendering mechanism uses that canvas as if the screen had nearly endless available real estate to display a much bigger portion of the underlying virtual image. – fixer1234 – 2017-05-08T06:19:05.313

Answers

7

100% Web Browser Solution

Here is a solution involving only Firefox, a trusted and secure browser.

Yahoo Map at 12%

Image source: https://search.yahoo.com (i.e. not Google Map) at 5369×5913 pixels and 24.6 MB

Using Firefox

  1. In Firefox:
    • open your web page
    • don't use full-screen mode
    • ensure you can see your scroll bars, you are going to need them
    • go to Tools > Web Developer > Inspector
  2. Make sure that the developer tools «Show in separate window» Show in separate window
  3. Select «Responsive Design Mode» (RDM)
    Responsive Design Mode
    • put that Inspector window to the side, you won't need it any more
  4. Back in your web page, using the RDM toolbar, pick a virtual window size that suits your need ; the larger the window, the more memory and resources Responsive Design Mode
  5. Using the camera icon in RDM toolbar or a Firefox Add-on, capture the image(†)
    Camera

† Some captures (not technically screen shots) are just too large to handle. I have used Save Page As Image... Abduction Add-on and its selection-copy X-Ray + Copy... to paste the images below in my favorite image editing software for post-processing, without compromising on quality, some of them well over 100 MB as PNG.
X-Ray + Copy

Map My Ride at 6%

Image source: http://mapmyride.com (i.e. not Google Map) at 5659×7966 pixels and 113.2 MB

Moon at 12%

Image source: https://www.google.com/moon/ (yay Google) at 3600×3540 pixels and 9.3 MB

► View this solution on YouTube.

SwiftArchitect

Posted 2017-04-12T08:01:01.897

Reputation: 241

Assuming you got to step 4. and are able to see the huge image using scroll bars, the difficulty is to capture that image in step 5: it is not a screen shot, it is a "Save Page as Image..." if you have installed the add-on mentioned in the footnote (†) or the camera in the RDM toolbar (again, not a screen shot) – SwiftArchitect – 2017-04-16T07:55:16.797

Posted a video. See https://youtu.be/jyxZlFEjlsc

– SwiftArchitect – 2017-05-08T02:27:18.260

You need to be at the top of the page when you activate RDM, and a custom size may require editing the custom dimension initially shown. Don't have an area selected because it selects using color, which will be captured in the snapshot. Those were keys to getting this to work. But I got it to work, both large pages and huge embedded images. On things like Google maps or sky, Google renders a much larger image after you define the larger size. You can capture an entire page using various screen capture software, but this is the first solution I've seen that will render a huge virtual image. – fixer1234 – 2017-05-08T05:44:04.200

0

한규환

Posted 2017-04-12T08:01:01.897

Reputation: 1

How does that answer the question? Please give more information – Mawg says reinstate Monica – 2018-02-13T10:38:20.073

-1

You can now use screenshot --fullpage in the Firefox GCLI: https://superuser.com/a/1199896/594282

Lassi

Posted 2017-04-12T08:01:01.897

Reputation: 279

Generally, just a link to another answer is better as a comment. Answers are intended for complete, self-contained solutions. Oh, look at that, you now have enough rep to comment. :-) – fixer1234 – 2017-04-22T03:48:38.323

2Question is not about how to make a screen shot per say, but how to extend the web page beyond the limits of the screen in the first place. – SwiftArchitect – 2017-05-08T01:05:22.043

@SwiftArchitect Good call. screenshot --fullpage can capture the entire content of a page with scrollbars (e.g. a very long written document). I don't know if it works with pages without scrollbars that are programmed not to load any more content than fits on the screen. – Lassi – 2017-05-09T15:36:31.610

Asked: 2017-04-12T08:01:01.897

Viewed: 2 354 times

Active: 2018-02-13T10:14:25.110