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

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?

如果不在最终用户机器上安装某些东西,我该怎么做? javascript是否有某种屏幕上限api?

11 个解决方案

#1

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

您可以获取页面的innerHTML,然后在服务器上处理它:

document.getElementsByTagName('html')[0].innerHTML;
// this would also be interactive (i.e. if you've
// modified the DOM, that would be included)

#2

No, javascript does not have anything like this.

不,javascript没有这样的东西。

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.

我想被证明是错的,但至少这对你来说是一个答案。

#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)

使用jQuery获取尽可能多的关于用户环境的信息。 (jQuery.support)/用户代理/ cookies /表单输入值,url(用于获取参数并知道哪个页面有错误)

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.

发送Moff提到的页面源代码。尝试按原样序列化DOM,以便比较与原始页面不同的内容。

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.

如果您需要将其保留用于历史目的,则发送页面源也很有用,因为当您更新页面时,它将变得不同。

#4

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

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

#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.

但是,有一个firefox插件,Pearl Crescent Page Saver,可能值得研究相关任务。

#6

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

看一下pagecrop(用jQuery + jCrop插件实现)

#7

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

我一定错过了什么,但你不能......

Press PrtScr on keyboard and paste into email.

按键盘上的PrtScr并粘贴到电子邮件中。

#8

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

看到这个问题。基本上,不,不是用javascript。也许使用ActiveX,但这又回到了在客户端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.

考虑编写一个服务器端脚本,完全重复用户的请求(假设它不是在POST之后)并存储生成的html文件。

#9

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.

您可以考虑使用基于Web的解决方案,例如Super Screenshot提供的解决方案!或WebShotsPro.com。根据您的需要,例如页面特定区域的屏幕截图或外部世界无法访问的页面,它可能对您不起作用,但这是一个想法。

#10

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

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

#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

您还可以看看Evernote如何进行屏幕捕获,也许您可以配合它或创建自己的chrome扩展。 https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc?hl=en

#1