如何拍摄网页的屏幕截图？

Question

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?

Answer 1

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)

Answer 2

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.

Answer 3

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.

Answer 4

我建议与FireShot进行某种集成，这是一个免费的Firefox / IE插件。

Answer 5

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.

Answer 6

看一下pagecrop （用jQuery + jCrop插件实现）

Answer 7

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

Press PrtScr on keyboard and paste into email.

Answer 8

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.

Answer 9

Chrome插件https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnjcddpki

Answer 10

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.

Answer 11

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