Saving large webpage as Image

Question

I'm trying to save a webpage as an image. The web page I'm trying to save is a bit long, and has many images.

I tried Google Chrome Screen Capture Extension and few other Chrome screen-capture plugins, but all gave me an empty image as output.

How can I overcome this? Are there any other known plugins (non-Chrome is OK) to save a large web page as an image?

Otrozone · Answer 1 · 2023-08-30T13:34:16.193

In Chrome browser show Developer tools: Menu -> More tools -> Developer tools (F12 or Ctrl + Shift + I).

Then Menu -> Run command (Ctrl + Shift + P).

Write down screenshot and use Capture full size screenshot.

(Optional) If the image does not contain full page, you can try to execute following command in console, to add some styling (as suggested in this thread).

document.querySelector("head").appendChild(Object.assign(document.createElement("style"), {textContent: "html, body, div, section {overflow: visible !important;}"}));

(Optional) If some element overlaps the content you need, simply use Selection tool to select the element and then hide or delete it using context menu.

score 20 · Answer 2 · edited Mar 20 '17 at 10:17

Print to PDF, then save the PDF as an image. I think that's probably your most foolproof method.

Printing to PDF is straightforward and you've got a ton of options, conversion after the fact will maintain page layout.

Conversion answer here: How do I save an image PDF file as an image?

As a note: if you use the PDFCreator project available from http://www.pdfforge.org/ the option to print a PDF as an image, or to print as an image is native.

score 12 · Answer 3 · edited Jun 12 '20 at 13:48

12

The Firefox Abduction! add-on couldn't save an image that large. If you absolutely want to save an ultra-lengthy single image and are open to non-Chrome solutions, here are a few that might work:

SiteShoter is a portable app:
There are any number of online web screenshot apps, such as this one

edited Jun 12 '20 at 13:48

Community

1

answered Nov 01 '12 at 06:11

Karan

57,289

Mariusz Pawelski · Answer 4 · 2013-03-05T18:36:17.353

11

There is a new Firefox Command Line that allows you to take screenshots.

Press Shift+F2 and write screenshot filename1.png 0 true

Unfortunately for your site I get error..., but nevertheless it's a nice to know feature .

UPDATE: It seems that syntax has slightly changed in newer version and now to take full screenshot you need to type screenshot filename.png --fullpage

edited Mar 05 '13 at 18:36

answered Nov 03 '12 at 17:08

Mariusz Pawelski

469

score 7 · Accepted Answer · answered Nov 01 '12 at 06:40

Found this standalone (Portable App) : Web Screen Capture, which could successfully save the webpage as an image...

Thanks everyone answered... :), suggestions are really valuable and made me think in many ways to get this done. "Karan"s answer made me think of Standalone applications which I was not aware of... Thanks a lot.

score 5 · Answer 6 · edited Nov 04 '12 at 17:11

5

You can use Awesome Screenshot:

Capture or clip selected area, or all visible portion, or entire page

Support PNG format

Support horizontal scroll when capturing

edited Nov 04 '12 at 17:11

Indrek

24,874

answered Nov 01 '12 at 12:41

Bagata

151

c-sharp · Answer 7 · 2012-11-01T10:51:42.517

2

If I have correctly understand your question then it will surely your answer. You have the Snagit tool to capture whole screen.

edited Nov 01 '12 at 10:51

answered Nov 01 '12 at 10:42

c-sharp

121

score 2 · Answer 8 · answered Nov 01 '12 at 13:21

Another way to do this (in an automated fashion), would be to use Phantom JS, the headless WebKit web browser. An included example "technews.js" will "capture Google News as a PNG image" and that example could be modified for any website.

http://phantomjs.org/

score 1 · Answer 9 · answered Nov 01 '12 at 10:15

1

If you use Chrome, then you can try Explain and Send Screenshots

answered Nov 01 '12 at 10:15

chele

11

score 1 · Answer 10 · edited Nov 04 '12 at 17:14

1

Use FireShot add-ons to save a large webpage to Image and PDF also.

It is supported on Firefox, Chrome and IE also.

To install in Firefox go to Tools -> Add-ons then search FireShot and install it.

More about Fireshot visit http://getfireshot.com/

edited Nov 04 '12 at 17:14

Nalaka526

1,624

answered Nov 01 '12 at 12:14

Manoranjan Jena

11

Moab · Answer 11 · 2012-11-01T05:43:14.813

I have tried a few things. Open the webpage in Chrome, then right click on an empty spot on the page and select "Save as", then select "save as type" "webpage,complete" at the bottom of the save as window.

Save it to an empty folder, it will save one file and a folder (they must be kept together in the same folder), any time you want to view the page, double click the htm file.

Inside the folder you will find all the images should you want them for other purposes.

.

enter image description here

score 0 · Answer 12 · answered Nov 01 '12 at 16:31

0

If you dont need the image the actual size, you could zoom out, then take a screenshot?

answered Nov 01 '12 at 16:31

Mark Redman

283

score 0 · Answer 13 · edited Nov 02 '12 at 07:25

If i understand your question, what you want is capturing the whole website, am I right? Do the following:

Open your favourite image editing program (I recommend Paint.NET), create a new canvas with a pretty big height, as high as the hole page would ever take
Switch to the webpage, press PrtSc on your keyboard.
Switch back to the image editing program , paste your image in the canvas.
Switch to the webpage, scroll the window down until you've reached the end of the last printed image, and press Print Screen again.
Switch back to your image editing program , now paste the New right underneath the previously pasted one, so that it starts from where the previous image Ended.
Repeat the previous steps dozen of times until you have scrolled down to the bottom of the window.

it's a long solution , but it works.

Saving large webpage as Image

13 Answers13