logo标签列表

如何对网页进行截屏？

javascriptscreencapture
15
我希望为我们的一个网站添加一个按钮，允许用户提交一个缺陷到我们的缺陷跟踪系统。
其中一个功能请求是可以发送问题页面的截图。
在不安装任何东西在最终用户计算机上的情况下，我该怎么做呢？Javascript有一些屏幕截图API吗？
请在此处检查答案，看是否有适合您的：https://dev59.com/cXVD5IYBdhLWcg3wL4cA - gpojd
类似的问题有更多最新的答案：https://dev59.com/62855IYBdhLWcg3wcz1h - nullability
11个回答
14
你可以获取页面的 innerHTML，然后在服务器上进行处理：
document.getElementsByTagName('html')[0].innerHTML;
// this would also be interactive (i.e. if you've
// modified the DOM, that would be included)
它并不是一个截图，但从某种意义上说，它更好。您不仅可以看到页面的外观，还可以看到用户查看该页面时的状态。 - Michael Todd
请注意，如果用户的特定浏览器（或更糟糕的是，他们的浏览器配置）有问题，除非您能够重新创建用户的环境，否则您将无法看到该问题。 - AaronSieb
另外，如果您在 JavaScript 中更改了 DOM，则可能不会像您期望的那样显示。 - Joel Coehoorn
DOM的变化部分可能是一个让人望而却步的问题。我们在这些页面上进行了大量的ajax操作。 - NotMe
1
我们自从回答这个问题以来已经走了很长的路！现在有了HTML5，你可以使用http://html2canvas.hertzen.com/ 这个工具。它可以完全满足你的需求，并且目前还处于测试阶段。 - Clarence Liu
6
不，JavaScript没有类似的功能。恐怕这将非常困难，我无法想出任何不需要在用户计算机上安装就可以完成此操作的方法。我希望我是错误的，但至少这是对你的回答。
不幸的是，我必须同意。您无法在用户计算机上安装“某些东西”而获取图像。您可以发送用户正在查看的确切HTML，但即使如此，如果您进行了大量的DOM操作，则可能已过时。 - Joel Coehoorn
更不用说，如果有外部CSS和JS文件，您还需要保存它们以重新创建页面。然后，您必须确保它们保存在相同的相对路径中，除非您想操作HTML。 - cbmeeks
6
获取尽可能多的用户环境信息，使用jQuery (jQuery.support) / 用户代理 / cookies / 表单输入值、url（用于获取参数和了解哪个页面出错）。
像Moff所提到的那样，发送页面源代码。尝试序列化当前DOM，以便比较与原始页面有何不同。
如果需要保留历史记录，则发送页面源代码也很有用，因为当您更新页面时，它将变得不同。
4
我建议与免费的Firefox/IE插件FireShot进行某种形式的集成。
3

我同意其他答案 - 没有成功的可能性。

然而，有一个 Firefox 插件，叫做 Pearl Crescent Page Saver，可能值得研究相关任务。

3

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

我认为这不会截取页面的屏幕截图。它只是将其包装在iframe中，然后缩小视图到指定的参数。没有输入数据被保存，你也得不到任何有用的调试信息。 - Martin
3
我可能有所遗漏，但您不是可以直接按键盘上的PrtScr键，然后将其粘贴到电子邮件中吗？
2
事实上，Alt+PrtScn将仅复制活动窗口到剪贴板，防止复制周围具有机密信息的窗口。 - Andrew Arnott
这可能适用于Windows机器，那么Mac / LINUX /等呢？ - LarryH
他们可以这样做，但这不允许我捕获我想要的页面上的所有其他内容。 - NotMe
2
请查看这个问题。基本上，不能使用JavaScript截取屏幕。也许可以使用ActiveX，但这需要在客户端安装东西。
考虑编写一个服务器端脚本，精确重复用户的请求（假设不是在POST之后），并存储生成的HTML文件。
1

你可以考虑使用基于网络的解决方案，例如Super Screenshot!或WebShotsPro.com。根据你的需求，例如特定页面区域的截图或无法从外部访问的页面，这些可能不适用于你，但这是一个想法。

这是一个内部应用程序，所以无法连接到外部。不过链接很好。 - NotMe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接