Take Screenshot of Browser via JavaScript (or something else)

Question

For support reasons I want to be able for a user to take a screenshot of the current browser window as easy as possible and send it over to the server.

Any (crazy)

Answer 1

I understand this post is 5 years old, but for the sake of future visits I'll add my own solution here which I think solves the original post's question without any third-party libraries apart from jQuery.

pageClone = $('html').clone();

// Make sure that CSS and images load correctly when opening this clone
pageClone.find('head').append("<base href='" + location.href + "' />");

// OPTIONAL: Remove potentially interfering scripts so the page is totally static
pageClone.find('script').remove();

htmlString = pageClone.html();

You could remove other parts of the DOM you think are unnecessary, such as the support form if it is in a modal window. Or you could choose not to remove scripts if you prefer to maintain some interaction with dynamic controls.

Send that string to the server, either in a hidden field or by AJAX, and then on the server side just attach the whole lot as an HTML file to the support email.

The benefits of this are that you'll get not just a screenshot but the entire scrollable page in its current form, plus you can even inspect and debug the DOM.

Answer 2

You might try PhantomJs, a headlesss browsing toolkit. http://phantomjs.org/

The following Javascript example demonstrates basic screenshot functionality:

var page = require('webpage').create();

page.settings.userAgent = 'UltimateBrowser/100';
page.viewportSize = { width: 1200, height: 1200 };
page.clipRect = { top: 0, left: 0, width: 1200, height: 1200 };

page.open('https://google.com/', function () {
  page.render('output.png');
  phantom.exit();
});

Answer 3

In JavaScript? No. I do work for a security company (sort of NetNanny type stuff) and the only effective way we've found to do screen captures of the user is with a hidden application.

Answer 4

A webpage can't do this (or at least, I would be very surprised if it could, in any browser) but a Firefox extension can. See https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas -- when that page says "Chrome privileges" that means an extension can do it, but a web page can't.

Answer 5

You can also do this with the Fireshot plugin. I use the following code (that I extracted from the API code so I don't need to include the API JS) to make a direct call to the Fireshot object:

    var element = document.createElement("FireShotDataElement");
element.setAttribute("Entire", true);
element.setAttribute("Action", 1);
element.setAttribute("Key", "");
element.setAttribute("BASE64Content", "");
element.setAttribute("Data", "C:/Users/jagilber/Downloads/whatev.jpg");

if (typeof(CapturedFrameId) != "undefined")
        element.setAttribute("CapturedFrameId", CapturedFrameId);


document.documentElement.appendChild(element);

var evt = document.createEvent("Events");
evt.initEvent("capturePageEvt", true, false);

element.dispatchEvent(evt);

Note: I don't know if this functionality is only available for the paid version or not.

Answer 6

We are temporarily collecting Ajax states, data in form fields and session information. Then we re-render it at the support desk. Since we test and integrate for all browsers, there are hardly any support cases for display reasons.

Have a look at the red button at the bottom on holidaycheck

Alternatively there is html2canvas of Google. But it is only applicable for never browsers and I've never tried it.