4

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
2
  • 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 May 8 '17 at 6:18
  • 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 May 8 '17 at 6:19
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.

3
  • 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 Apr 16 '17 at 7:55
  • Posted a video. See youtu.be/jyxZlFEjlsc – SwiftArchitect May 8 '17 at 2:27
  • 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 May 8 '17 at 5:44
0

http://www.goohwan.net/entry/%ED%81%B0%EC%A7%80%EB%8F%84-%EC%84%9C%EB%B9%84%EC%8A%A45%EA%B5%AC%EA%B8%80%EC%A7%80%EB%8F%84v2World

this site serve 'google_map' & 'how to scrab'

1
-1

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

3
  • 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 Apr 22 '17 at 3:48
  • 2
    Question 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 May 8 '17 at 1:05
  • @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 May 9 '17 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.