Take a screenshot of whole screen using html5/javascript?

Question

I am looking to take a full screenshot through a webpage, outside of the browser window. Basically, I am trying to build a help tool for both web-based apps and offline programs, and as a part of this I would like to be able to take screenshots from a webpage so the user does not have to download a program to take a screenshot/upload it to our website.

I am aware there may not be a solution to this, but if there was that would be awesome!

Cheers in advance

Answer 1

There are ways to achieve what you want to do in part. However, it is important to know that they do require user permissions.

You also ask if a web page can take a screenshot outside of a browser window- this is a huge breach of privacy and I would advise against implementing anything that goes down this route. For what your trying to do, it is always best to have user consent.

If you interest is in saving the user time and giving the user a more seamless experience, consider one or more of these options:

1. You can use one of several JavaScript plugins/ API's to allow to user to select portions of what they see on the web page and then upload it to you. For instance, you can do this on YouTube. Go to youtube.com and scroll to the bottom of the page and click Help and then Send feedback. Here you can enter text as well as "highlight" portions of the page and send them to YouTube. To achieve something like this, look into something like html2canvas.

2. Give your user quick access to the download pages for tools like Snipping Tool for Windows. This way, if they don't have it on their machine already, at least they don't have to go looking for it.

3. From my experience in dealing with customers, many of them don't even know that things like Snipping Tool exist on their machine. Perhaps, an FAQ or help section that would guide the user would be useful.

In summary, it is possible through a web page to "screenshot" what is on a web page itself but nothing I have come across that allows you to capture anything outside of the web browsers context.

Answer 2

This is definitively not possible using only HTML5/JavaScript. You would have to involve a browser plugin such as Flash, a Java applet or perhaps a Firefox add-on.

Note: I'm assuming you mean taking a screenshot of the entire monitor, not just the browser window.