Take a screenshot of a webpage with JavaScript?

Question

Is it possible to to take a screenshot of a webpage with JavaScript and then submit that back to the server?

I'm not so concerned with browser security issues. etc. as the implementation would be for HTA. But is it possible?

Solution 1

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.

Solution 2

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/

Solution 3

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.

Solution 4

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/

Solution 5

A possible way to do this, if running on windows and have .NET installed you can do:

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

public Bitmap GenerateScreenshot(string url, int width, int height)
{
    // Load the webpage into a WebBrowser control
    WebBrowser wb = new WebBrowser();
    wb.ScrollBarsEnabled = false;
    wb.ScriptErrorsSuppressed = true;
    wb.Navigate(url);
    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


    // Set the size of the WebBrowser control
    wb.Width = width;
    wb.Height = height;

    if (width == -1)
    {
        // Take Screenshot of the web pages full width
        wb.Width = wb.Document.Body.ScrollRectangle.Width;
    }

    if (height == -1)
    {
        // Take Screenshot of the web pages full height
        wb.Height = wb.Document.Body.ScrollRectangle.Height;
    }

    // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
    wb.Dispose();

    return bitmap;
}

And then via PHP you can do:

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

Then you have the screenshot in the server side.

View more solutions

Comments

[Doug Blank]

Can you clarify why you want to do this? Perhaps there are alternative solutions to taking screenshots.

[Scott Bennett-McLeish]

I'm looking at having the user roughly design what they want, a bit of a sketch and a bit of a drag 'n drop of objects. I then want this "design" to be used as some part of the instructions in a production process. It is definitely a user-involved step, nothing clandestine here :)

[ilhan]

Possible duplicate of How to take page screen shot of a visitor?

[Anderson Green]

Does this answer your question? Using HTML5/Canvas/JavaScript to take in-browser screenshots

[Ricket]

I agree with Allen, that's an ingenious way to potentially screenshot a page!

[Luke Stanley]

wonder if SVG would help, might have to look at Google's source

[mrBorna]

He's trying to do it as a part of a web app across clients' computes not for personal use

[Hüseyin BABAL]

Thanks, the links in your post explains everyting well

[mihai]

Although slightly unrelated to the questions, this is an awesome suggestion ! Thanks !

[trusktr]

You can use Niklas's html2canvas code for rendering html in canvas, then use this to save an image.

[trusktr]

Do you know if phantomjs can generate an image of an element on a page (not the whole page)?

[zopieux]

Yes you can. Either use this snippet with PhantomJS or use CasperJS.

[Dr TJ]

why it doesn't load some styles that even i can see them loaded in IE9?!

[Pete Alvin]

What an "HTA" please?

[Joel Anair]

@PeteAlvin an HTA is a Hypertext application, which was a way to run privileged JS applications in Internet Explorer. Not super relevant today.