Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Take a screenshot of a webpage with JavaScript?

People also ask

Is there a way to take a screenshot of an entire webpage?

Click the three-dot icon from the top-right corner and select Run command. Also, you can press Ctrl+Shift+P on Windows or Command+Shift+P on Mac. Type screenshot into the search box. Select Capture full-size screenshot.

How do I take a screenshot of a HTML page?

Please click on the toolbar button (or press Alt+Shift+D combination) to capture the screenshot. You can adjust the screenshot image format from the options page.

How do I screenshot a specific part of a Web page?

Press “Windows + Shift + S”. Your screen will appear grayed out and your mouse cursor will change. Click and drag on your screen to select the part of your screen you want to capture. A screenshot of the screen region you selected will be copied to your clipboard.


Google is doing this in Google+ and a talented developer reverse engineered it and produced http://html2canvas.hertzen.com/ . To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/


I have done this for an HTA by using an ActiveX control. It was pretty easy to build the control in VB6 to take the screenshot. I had to use the keybd_event API call because SendKeys can't do PrintScreen. Here's the code for that:

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

That only gets you as far as getting the window to the clipboard.

Another option, if the window you want a screenshot of is an HTA would be to just use an XMLHTTPRequest to send the DOM nodes to the server, then create the screenshots server-side.


Another possible solution that I've discovered is http://www.phantomjs.org/ which allows one to very easily take screenshots of pages and a whole lot more. Whilst my original requirements for this question aren't valid any more (different job), I will likely integrate PhantomJS into future projects.


Pounder's if this is possible to do by setting the whole body elements into a canvase then using canvas2image ?

http://www.nihilogic.dk/labs/canvas2image/