User:PleaseStand/Taking screenshots of websites

You do not need to install special software to take screenshots of websites, even if you need to get more than the first screenful. These instructions assume certain software is available to you, but you can adapt them if you have to work within a locked-down software configuration.

From time to time, website screenshots are useful to Wikipedia and other Wikimedia projects for critical commentary on the site in question, as well as for instructional material about using Wikipedia.

In Firefox

Taking screenshots is extremely easy using the built-in developer toolbar (GCLI).

1. Press ⇧ Shift+F2 to open the command line.
2. Type screenshot foo.png --fullpage and press ↵ Enter. Firefox will save the screenshot in your Downloads folder as "foo.png".
3. To remove the transparent areas corresponding to the width of the scrollbars, use any image editor's autocrop feature.
4. An image editor can also be used to resize the screenshot. This is useful if you captured in a high resolution or if the image will be used under fair use.

In other browsers

Just about any web browser with a true full-screen mode will suffice. Keep in mind these instructions are written for users of Microsoft Windows and not for OS X.

• Internet Explorer 8 (turn off the status bar in Tools → Toolbars → Status Bar)
  • You can add the below bookmarklets to the toolbar by clicking on the arrow star on the Favorites Bar. Right-click the new bookmark and choose properties. Fill in the name on the General tab and the code in the URL box on the Web Document tab. You can use a keyboard shortcut.
• Opera is a bit easier.

Grabbing the screenshots

First set your screen resolution to the width you want, and then you can set up with

javascript:document.documentElement.style.overflow="hidden";document.body.style.overflow="visible";void(setTimeout(function(){document.documentElement.style.paddingBottom=(psWinHeight=typeof(innerHeight)=="undefined"?document.documentElement.clientHeight:innerHeight)+"px";scrollTo(0,0);},10000))

Immediately go into full-screen mode (F11) and move the mouse to the center of the screen. Once ten seconds have elapsed, continue. Use the Print Screen key to put a screenshot on the clipboard, leave full screen mode using F11, and save the contents of the clipboard using Windows Paint (Ctrl+A to select all, Ctrl+V to paste, then Save As). Alternatively, instead of using Paint, you can choose Options → Capture/Screenshot from IrfanView (see below for its most important use) and set up a hot key that will automatically save your screenshots (be sure to turn off "Include mouse pointer", capture the entire desktop area, and save your files in PNG format). Then you can use

javascript:scrollBy(0,psWinHeight)

which scrolls one page in all browsers if you have done the set-up first (using the space bar to scroll leaves a bit of overlap). Go into full screen mode again. Once the page has scrolled, Print Screen and repeat until you have gotten all of the pages.

Stitching the screenshots together

Here is how you can do this in IrfanView, which is unfortunately closed-source, proprietary freeware. You can use a more or less advanced image editor instead.

1. Image → Create Panorama image
   1. Direction: Vertical
   2. Add images
   3. Sort images (if necessary)
   4. Spacing: 0 pixels
   5. Create image
2. Edit → Auto Crop Borders (to get rid of whitespace at the bottom, your mileage may vary)
3. If you captured in a high resolution (or the image will be used under fair use), consider shrinking the image using Image → Resize/Resample.
4. File → Save As
   1. Choose a file name.
   2. Save as type: PNG (line art and text) or JPG (if the page is mostly made up of photos)
   3. OK