15

I want to add a button to one of our web sites that will allow the user to file a bug with our bug tracking system.

One of the feature requests is that a screen cap of the page in question be sent along.

Without installing something on the end users machine, how can I do this? Does javascript have some sort of screen cap api?

NotMe
  • 87,343
  • 27
  • 171
  • 245
  • Check the answers here to see if any work for you: http://stackoverflow.com/questions/60455/take-a-screenshot-of-a-webpage-with-javascript – gpojd Mar 31 '09 at 16:19
  • Similar question with more up-to-date answers: http://stackoverflow.com/questions/4340056/can-you-take-a-screenshot-of-the-page-using-canvas – nullability Jul 03 '13 at 16:57

11 Answers11

14

You may grab the innerHTML of the page and then process it on the server:

document.getElementsByTagName('html')[0].innerHTML;
// this would also be interactive (i.e. if you've
// modified the DOM, that would be included)
moff
  • 6,415
  • 31
  • 30
  • It's not exactly a screenshot, but, in a sense, it's better. You get to see not just what the page looked like, you get to see the state of the page at the time the user was viewing it. – Michael Todd Mar 31 '09 at 16:23
  • Note, however, that if a user's specific browser (or worse, their browser configuration) are to blame you won't be able to see the issue until you're able to recreate the user's environment. – AaronSieb Mar 31 '09 at 16:47
  • Also, if you've made changes to the DOM in javascript they may not show up like you expect. – Joel Coehoorn Mar 31 '09 at 17:08
  • The DOM changes part may be a deal breaker. We do a lot of ajax on these pages. – NotMe Apr 01 '09 at 14:46
  • 1
    We've come a long way since this question was answered! With HTML5 there's now this - http://html2canvas.hertzen.com/ Does exactly what you need to the best of its abilities, still in beta though. – Clarence Liu May 18 '12 at 21:23
6

No, javascript does not have anything like this.

I'm afraid that this will be quite hard. I can not think anything that would do this without installing on users computer.

I'd like to be proven wrong, but atleast this is an answer for you.

Mikko Tapionlinna
  • 1,450
  • 1
  • 12
  • 21
  • Unfortunately, I have to agree. You can't get the image without installing _something_ to the user's machine. What you _can_ do is send the exact _html_ or the user is viewing, but even that might be out of date if you've done a lot of DOM manipulation. – Joel Coehoorn Mar 31 '09 at 16:20
  • Not to mention you will have to save all of the external CSS and JS if any to recreate the page. Then, you will have to make sure they are saved in the same relative path(s) unless you want to manipulate the HTML. – cbmeeks Apr 30 '12 at 12:36
6

Get as much Info as you can about the user environment using jQuery. (jQuery.support) / user agent / cookies / form input values, the url (for get parameters and to know which page had an error)

Send the source of the page like mentionned by Moff. Try serializing the DOM as it is now so you can compare what is different from the original page.

It is also useful to send the source of the page if you need to keep it for historic purposes, since when you update the page, it will be become different.

Martin
  • 5,954
  • 5
  • 30
  • 46
4

I'd suggest some sort of integration with FireShot which is a Free Firefox/IE addon.

scunliffe
  • 62,582
  • 25
  • 126
  • 161
3

I agree with the other answers -- no dice.

However, there is a firefox plugin, the Pearl Crescent Page Saver, which might be worth looking into for related tasks.

jedierikb
  • 12,752
  • 22
  • 95
  • 166
3

Take a look at pagecrop (implemented with jQuery + jCrop plug-in)

Imran
  • 87,203
  • 23
  • 98
  • 131
  • I don't think this will take a screenshot of the page. I just wraps it in an iframe, then reduce the view to specified parameters. No input data is saved, you don't get any useful debug info. – Martin Mar 31 '09 at 17:41
3

I must be missing something, but can't you just...

Press PrtScr on keyboard and paste into email.

Brad
  • 20,302
  • 36
  • 84
  • 102
  • 2
    In fact Alt+PrtScn will copy just the active window to the clipboard, preventing copying surrounding windows with confidential information. – Andrew Arnott Mar 31 '09 at 18:13
  • This may work on a Windows machine, what about a Mac / LINUX / etc? – LarryH Apr 01 '09 at 02:39
  • They could do this, but it doesn't allow me to capture all of the other things I want from the page. – NotMe Apr 01 '09 at 14:45
2

See this question. Basically, no, not with javascript. Perhaps with ActiveX, but that's back to installing things on the client's PC.

Consider writing a server-side script that repeats the user's request exactly (assuming it's not after a POST) and storing the resulting html file.

Community
  • 1
  • 1
Phil H
  • 19,928
  • 7
  • 68
  • 105
1

Chrome plugin https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnjcddpki

PanosJee
  • 3,866
  • 6
  • 36
  • 49
1

You might look into using a web based solution such as the one offered at Super Screenshot! or WebShotsPro.com. Depending on your needs, such as screenshots of specific areas of pages, or pages inaccessible from the outside world, it may not work for you, but it is an idea.

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
0

You can also take a look at how Evernote does its screen capturing and maybe you can tie in to that or create your own chrome extension. https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc?hl=en

Michael Yagudaev
  • 6,049
  • 3
  • 48
  • 53