出于支持原因，我希望用户能够尽可能轻松地截取当前浏览器窗口的屏幕截图并将其发送到服务器。
有什么（疯狂的）想法吗？
【问题讨论】：
标签： javascript browser screenshot
如果你能做到这一点，那将是 JavaScript 中一个相当大的安全漏洞。想象一个恶意用户通过 XSS 攻击在您的网站上安装该代码，然后截取您所有的日常工作。想象一下，您的网上银行正在发生这种情况......
但是，可以在 JavaScript 之外执行此类操作。我开发了一个 used screen capture code like this 的 Swing 应用程序，每当用户遇到 RuntimeException 时，它都能很好地向帮助台发送电子邮件并附上屏幕截图。
我想您可以试验一个挂在角落里的签名 Java 小程序（震惊！恐怖！不！）。如果在安装时使用适当的安全权限执行，它可能会被强制执行那种截图代码。
为方便起见，这里是我链接到的网站的代码：
import java.awt.Dimension;
import java.awt.Rectangle;
import java.awt.Robot;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.io.File;
...
public void captureScreen(String fileName) throws Exception {
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
Rectangle screenRectangle = new Rectangle(screenSize);
Robot robot = new Robot();
BufferedImage image = robot.createScreenCapture(screenRectangle);
ImageIO.write(image, "png", new File(fileName));
}
...
【讨论】：
请参阅此处共享的答案以获得相对成功的实施： https://stackoverflow.com/a/6678156/291640
【讨论】：
您可以尝试在画布中呈现整个页面并将此图像保存回服务器。玩得开心:)
【讨论】：
网页无法做到这一点（或者至少，如果在任何浏览器中可以做到，我会感到非常惊讶），但 Firefox 扩展程序可以。请参阅https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas——当该页面显示“Chrome 特权”时，这意味着扩展程序可以执行此操作，但网页不能。
【讨论】：
在我看来，支持需要（至少）两个问题的答案：
截图——视觉——是非常必要的，它可以回答第一个问题，但不能回答第二个问题。
作为第一次尝试，我会尝试将整个页面发送给支持。支持技术人员可以在他的浏览器中显示该页面（回答第一个问题）；并且还可以看到客户 html 的当前状态（有助于回答第二个问题）。
我会尝试通过 AJAX 或作为表单的有效负载向客户端 JS 发送尽可能多的页面。我还会发送不在页面上的信息：影响页面状态的任何内容，例如 cookie 或会话 ID 等。
客户可能有一个类似提交的按钮来启动流程。
我认为这会奏效。让我们看看：它需要在服务器的某个地方使用一些 CGI 来捕获传入的用户页面并使其可用于支持，可能通过写入磁盘文件来实现。然后支持人员可以加载（或已自动加载）同一页面。所有其他信息（cookie 等）都可以放入支持人员查看的页面中。
另外：处理提交按钮 onclick() 的客户端 JS 还可以包含任何有用的 JS 变量值！
嘿，这行得通！我开始兴奋了:-)
HTH
--皮特
【讨论】：
我见过有人用两种方法做到这一点：
设置一个单独的服务器用于截屏并在其中运行一堆 Firefox 实例，如果您在 ruby 中执行此操作，请查看这两个 gem：selenium-webdriver 和 headless
使用像 http://url2png.com 这样的托管解决方案（更简单）
【讨论】：
您也可以使用 Fireshot 插件来执行此操作。我使用以下代码（我从 API 代码中提取，因此不需要包含 API JS）直接调用 Fireshot 对象：
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);
注意：我不知道此功能是否仅适用于付费版本。
【讨论】：
也许可以使用http://html2canvas.hertzen.com/。然后你可以捕获显示然后处理它。
【讨论】：
您可以尝试 PhantomJs，一个无头浏览工具包。 http://phantomjs.org/
以下 Javascript 示例演示了基本的屏幕截图功能：
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();
});
【讨论】：
我知道这篇文章已有 5 年历史，但为了以后的访问，我将在这里添加我自己的解决方案，我认为它可以解决原始帖子的问题，除了 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();
您可以删除您认为不必要的 DOM 的其他部分，例如支持表单（如果它位于模式窗口中）。或者，如果您希望与动态控件保持一些交互，您可以选择不删除脚本。
将该字符串发送到服务器，无论是在隐藏字段中还是通过 AJAX，然后在服务器端，只需将整个字符串作为 HTML 文件附加到支持电子邮件中。
这样做的好处是，您不仅可以获得屏幕截图，还可以获得当前形式的整个可滚动页面，而且您甚至可以检查和调试 DOM。
【讨论】：
打印屏幕？老派和几个按键，但它的工作原理！
【讨论】：
这可能不适合你，但在 IE 上你可以使用snapsie 插件。它似乎不再处于开发阶段，但可以从链接站点获得最新版本。
【讨论】：
你需要一个activeX控件。没有它我无法想象。您可以强制用户在客户端安装 activex 控件后首先安装它们，并且您可以捕获。
【讨论】：
我们正在临时收集 Ajax 状态、表单字段中的数据和会话信息。然后我们在支持台重新渲染它。由于我们针对所有浏览器进行了测试和集成，因此几乎没有任何出于显示原因的支持案例。
看看holidaycheck底部的红色按钮
另外还有谷歌的html2canvas。但它只适用于never浏览器，我从未尝试过。
【讨论】：
在 JavaScript 中？不。我确实为一家安全公司工作（类似于 NetNanny 类型的东西），我们发现对用户进行屏幕截图的唯一有效方法是使用隐藏的应用程序。
【讨论】：