通过JavaScript（或其他方式）拍摄浏览器的屏幕截图

出于支持原因，我希望用户能够尽可能轻松地拍摄当前浏览器窗口的屏幕截图，并将其发送到服务器

---

有（疯狂的）想法吗？

打印屏幕？老学校和几个按键，但它的工作

您可以尝试在画布中呈现整个页面，并将此图像保存回服务器。玩得开心：）

在JavaScript中？不。我确实在一家安全公司工作（类似于NetNanny类型的东西），我们发现，对用户进行屏幕截图的唯一有效方法是使用隐藏的应用程序。

这可能不适用于您，但在IE上，您可以使用该插件。它似乎不再处于开发阶段，但最后一个版本可以从链接的站点获得。

如果你能做到这一点，那在JavaScript中似乎是一个相当大的安全漏洞。想象一下，一个恶意用户通过XSS攻击在您的站点上安装该代码，然后截屏您的所有日常工作。想象一下你的网上银行发生了什么

但是，可以在JavaScript之外执行此类操作。我开发了一个Swing应用程序，每当用户遇到RuntimeException时，它都会向帮助台发送一封带有附加屏幕截图的电子邮件

我想你可以尝试一个挂在角落里的签名Java小程序（shock！horror！nooooo！）。如果在安装时使用适当的安全权限执行，则可能会强制执行此类屏幕截图代码

为方便起见，以下是我链接到的网站的代码：

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));
}
...

---

网页不能做到这一点（或者至少，在任何浏览器中，如果它可以做到，我会非常惊讶），但Firefox扩展可以做到。请看--当该页面显示“Chrome权限”时，这意味着扩展可以做到这一点，但网页不能做到这一点。

我想你需要一个activeX控件。没有它我无法想象。在客户端安装activex控件后，您可以强制用户先安装它们。activex控件应该可以工作，您可以捕获它们。

在我看来，支持需要（至少）两个问题的答案：

屏幕是什么样子的？及

为什么看起来是那样

屏幕截图——一种视觉效果——是非常必要的，它回答了第一个问题，但不能回答第二个问题

作为第一次尝试，我会尝试将整个页面发送给支持人员。支持技术人员可以在他的浏览器中显示该页面（回答第一个问题）；还可以查看客户html的当前状态（帮助回答第二个问题）

我会尝试通过AJAX或表单的有效负载向客户端JS发送尽可能多的页面。我也会发送不在页面上的信息：任何影响页面状态的信息，比如cookies、会话ID或其他信息

cust可能有一个类似提交的按钮来启动流程

我想那会管用的。让我们看看：它需要服务器上某个地方的一些CGI来捕获传入的用户页面，并使其可以支持，可能是通过写入磁盘文件。然后，支持人员可以加载（或自动加载）同一页面。所有其他信息（cookies等）都可以放到支持人员看到的页面中

另外：处理submit按钮onclick（）的客户端JS还可以包含任何有用的JS变量值

嘿，这能行！我开始激动了：-）

嗯

---

--pete

我们暂时收集Ajax状态、表单字段中的数据和会话信息。然后我们在支持台重新渲染。由于我们对所有浏览器进行测试和集成，因此几乎没有任何显示支持案例

看一下屏幕底部的红色按钮

---

另一种选择是谷歌。但它只适用于从不使用的浏览器，我也从未尝试过。

我见过有人用两种方法来实现这一点：

为屏幕截图设置一个单独的服务器，并在上面运行一组firefox实例，如果您使用ruby进行操作，请查看这两个gem:

selenium webdriver

和

headless

使用托管解决方案，如（更简单）

---

请参阅此处共享的答案，以获得相对成功的实施：

利用：

---

您也可以使用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);

---

注意：我不知道此功能是否仅适用于付费版本。

也许可以使用。然后，您可以捕获显示并对其进行处理。

您可以尝试PhantomJs，一种无头浏览工具包。

以下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（）；
//确保打开此克隆时正确加载CSS和图像
pageClone.find（'head'）。append（“”）；
//可选：删除可能干扰的脚本，使页面完全静态
pageClone.find（'script'）.remove（）；
htmlString=pageClone.html（）；

您可以删除您认为不必要的DOM的其他部分，例如支持表单（如果它位于模式窗口中）。或者，如果希望与动态控件保持某种交互，可以选择不删除脚本

将该字符串发送到服务器，可以在隐藏字段中发送，也可以通过AJAX发送，然后在服务器端将整个字符串作为HTML文件附加到支持电子邮件中

---

这样做的好处是，您不仅可以获得屏幕截图，还可以获得当前形式的整个可滚动页面，此外，您甚至可以检查和调试DOM。

您可以捕获页面所在的视口，但是